zhihuijingqu-web

A Vue.js project

文档

> 先 npm 下载插件

  npm i yf-element

> 然后你可以像使用普通组件一样使用 v-el-search

# 搜索框
<v-el-search :dataList="dataList" inline @submit="findBtn">
    <el-button slot="right" @click="addActivity">
        <span>+</span>
        添加活动
    </el-button>
</v-el-search>

文档

| 序号 | 参数 | 说明 | 类型 | 必填 | 可选值 | 默认值 | 补充 | | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | | 1 | dataList | 数组 | Array | true | - | - | -| | 2 | reset | 是否有重置按钮 | Boolean | false | - | - | - | | 3 | loading | 加载状态 | Boolean | false | - | - | -| | 4 | btnRight | 查询按钮左浮动还是右浮动 | Boolean | false | - | - | - | | 5 | inline | 是否横向排练 | Boolean | false | - | - | - | | 6 | size | 按钮样式 | String | false | - | 'medium' | - | | 7 | @submit | 查询回调 | function | - | - | - | - | | 8 | @resetSub | 重置回调 | function | - | - | - | - |

| 序号 | 名字 | 说明 | 可选值 | | ---- | ---- | ---- | ---- | | 1 | type | 类型 | 'input、picker-date、picker-daterange、picker-daterange-two、select'｜ | 2 | label | - | - | | 3 | key | 返回给你的key | - | | 4 | value | value | - | | 5 | placeholder | - | - | | 6 | width | 宽度 | 如 200px | | 7 | options | 配置 | - |

dataList

dataList:[
{
    type: 'input',
    label: '订单号',
    key: 'orderNum',
    placeholder:'请输入订单号',
    value: ''
},
{
    type: 'picker-date',
    label: '开始日期',
    width:'300',
    key: 'createStartTime',
    value: '',
    options:{
        disabledDate: (time) => {
            return time.getTime() < Date.now() - 8.64e7*366;
        }
    }
},
{
    type: 'picker-date',
    label: '结束日期',
    width:'300',
    hidden:true,
    key: 'createEndTime',
    value: '',
    options:{
        disabledDate: (time) => {
            let startDateObj = new Date(this.form.createStartTime);
            return time.getTime() < startDateObj.getTime()  || time.getTime() < Date.now() - 8.64e7*366;
        }
    }
},
{
  type: 'picker-daterange-two',
  label: '时间段',
  key: 'daterange',
  value: '',
  options: {
      onPick: (obj) => {
          this.pickerMinDate = new Date(obj.minDate).getTime();
          if (obj.maxDate){
              this.pickerMinDate=null;
          }
      },
      disabledDate:(time)=> {
          if (this.pickerMinDate) {
              return time.getTime() < new Date(this.pickerMinDate).getTime() - 8.64e7 || time.getTime() < this.pickerMinDate ;
          }
      }
  }
},
{
    type: 'select',
    label: '分账状态',
    key: 'profitStatus',
    value: '',
    options:[{
        value: '',
        label: '全部'
        }, {
        value: 'success',
        label: '成功'
        }, {
        value: 'fail',
        label: '失败'
        }, {
        value: 'watting',
        label: '等待分账'
    }]
},
]


# 报表
<v-el-table :tableData="tableData" :tableColumn="tableColumn"></v-el-table>
     
tableData: [
  {
    id: '12987122',
    name: '王小虎0',
    amount1: '234',
    amount2: '3.2',
    amount3: 10
  }, {
    id: '12987123',
    name: '王小虎1',
    amount1: '165',
    amount2: '4.43',
    amount3: 12
  },
],
tableColumn:[
  {
    props:'id',
    label:'姓名',
    width:''
  },
  {
    props:'name',
    label:'数值',
    width:''
  }
],