vue——组件之elementTable组件再封装

首先先上代码，下面是一个vue类型的文件，代码如下

组件使用：

import tlTable from 'components/Table/index';

components: { tlTable }

data() {
   return {
       dataTable: {
            tr: []       // 表格行数据
            data: []   // 表格内容数据
       }
   }
}

此组件封装了element-ui中table组件的部分功能，列举如下(table数据参数为'table')

1、复选框功能 ：table.hasSelect；默认为false，false为无，true为有，当为true时，通过监听自定义事件'onHandleSelectionChange'并传参来执行复选框更改选中项后的回调函数

2、表格折行功能：table.hasExpand；默认为false，false为无，true为有，当为true时，需要设置table.expands，里面是需要折行显示的数据

          expands: [
            {
              id: '1',
              label: '收款人姓名：',
              prop: 'gather_name'
            },
            {
              id: '2',
              label: '银行卡号：',
              prop: 'bank_card'
            },
            {
              id: '3',
              label: '户行：',
              prop: 'bank'
            }
          ]

3、按钮列功能：table.hasOperation；默认为false，false为无，true为有，当为true时，需要设置table.operation，里面是按钮属性数据

          operation: {             // 操作功能
            label: '操作',                // 操作列的行首文字
            width: '80',                // 操作列的宽度
            className: '',               // 操作列的class名
            data: [                      // 操作列数据
              {
                label: '删除',                // 按钮文字
                Fun: 'handleDelete',         // 点击按钮后触发的父组件事件
                size: 'mini',                // 按钮大小
                id: '1'                     // 按钮循环组件的key值
              }
            ]
          }

只需监听'handleDelete'事件即可执行按钮回调函数，label是按钮名称，size是element-ui中button组件控制按钮大小的属性

4、自定义列功能：table.tr[index].show；默认为true，show有三个值，true时，是普通表格列展示，false时，此列不展示，template时是自定义列。为template时，使用如下例：

    data() {
      return {
        dataTable: {
          tr: [
            {
              id: '1',
              label: '用户名',
              prop: 'username',
              show: 'template',
              className: 'username'
            },
            {
              id: '2',
              label: '真实姓名',
              prop: 'real_name'
            },
            {
              id: '3',
              label: '性别',
              prop: 'sex_value'
            },
            {
              id: '11',
              label: '客服',
              prop: 'agent_name'
            },
            {
              id: '7',
              label: '渠道',
              prop: 'channel_id'
            },
            {
              id: '8',
              label: '注册时间',
              prop: 'regist_time',
              minWidth: '150'
            },
            {
              id: '9',
              label: '上次登录时间',
              prop: 'login_time',
              minWidth: '150'
            },
            {
              id: '10',
              label: '用户状态',
              prop: 'status_value'
            }
          ],
          data: []
        }

4、表位合计行：hasShowSummary：默认为false，false为无，true为有，当为true时，需要设置table.getSummaries属性，此属性值为函数，可传一个参数，参数为当前表格的列组成的数组，此属性最中return一个数组，即为合计行最终显示的数据，使用例子如下

data() {
     return {
         dataTable: {
              tr: [],
              data: [],
              hasShowSummary: true,
              getSummaries() {
                   return ['合计', 'N/A', '2', '41']
              }
         }
     }
}

5、点击表格行事件：在父组件监听rowClick事件即可，此函数接受一个参数，包含三个属性，分别是：row：当前点击行数据，column：当前点击单元格所在列的列数据，event：原生事件对象。使用例子如下

      // 操作 —— 点击表格行
      rowClick(data) {
        const { column, row } = data;
        if (column.className === 'income') {
          if (row.online_type.toString() === '1') {
            this.$message({
              type: 'warning',
              message: '线下状态不可查看',
              duration: 2000
            });
            return
          }
          window.open(location.origin + '/#/daily/income?time=' + row.date + '&type=2');
          return
        }
        const form = this.dataDetailIncome.form;
        form.income = row.income;
        form.loan_money = row.loan_money;
        form.online_type = row.online_type.toString();
        form.statistic_date = row.date;
        form.id = row.id.toString();
        this.dataDetailIncome.disabledButton = row.online_type.toString() === '1' ? 'true' : 'false';
        this.dataDetailIncome.dialogFormVisible = true;
      }

6、自定义行类名，列类名：在table.tr中设置的className为列类名，在table.data中设置的class为行类名，行类名的class是一个数组，列类名的className是一个字符串，通过这两个类名，可实现表格中单独某些单元格样式或功能的调整，注意：行类名可在通过ajax获取表格数据成功后的回调函数中去赋值。

7、自定义列宽度，最小宽度：width，minWidth；直接写字符串形式的数字即可，不需要单位

8、加载动画：loading；默认为false，false时为无，true时为有

9、自定义表格边框：border；默认为false，false是为无，true时为有

10、合并单元格：hasMergeRowOrColumn；默认为false，false时为无，true时为有，当为true时，还需要监听自定义事件'onMergeRowOrColumn'，此方法接受一个参数，包含四个属性row，column，rowIndex，columnIndex，此功能我还暂时未使用，所以至于具体如何使用，请移步element-ui官方文档自行查阅