vue 点击表头可任意排序的表格组件

1.组件内容（我放到了base/commonTable/index.vue下）

index.vue

 

2.使用方式

引入组件：

  import commonTable from '../../base/commonTable'

注册组件

在需使用的地方引入：

method方法实现：

调用接口返回所需参数：

this.tabelDate 为接收后台返回tabel数组的结果

具体实现方法如下（初始化画表格）：

//设置表格初始化参数
      setProps(name, data, pageTotal) {
      // this.pageTotal = pageTotal; // 设置总页数
      this.tableDataProps = {
        dictionary: this.dictionary,  //表头内容，几设置参数
        tableData: this.tableData,
        border: false,
        operateTitle: "操作",
        operate: [
          {
            operateWord: "查看",
            operateWordColor: "#0098e4"
          },
          {
            operateWord: "修改",
            operateWordColor: "#0098e4"
          },
          {
            operateWord: "删除",
            operateWordColor: "#0098e4"
          }
        ]
      };
    },

表格内容及表头写到data里：

 dictionary:[    //表格内容
          {
            keyName: '题目编号',
            key: 'id',
            type:'normal',
            color:'#e24737'
          },
          {
            keyName: '题目名称',
            key: 'name',
            type:'normal'
          },{
            keyName: '备注信息',
            key: 'desc_msg',
            type:'normal'
          },{
            keyName: '配置日期',
            key: 'create_date',
            type:'normal'
          },{
            keyName: '经办工号',
            key: 'operate_num',
            type:'normal'
          },
          {
            keyName: '经办姓名',
            key: 'real_name',
            type:'normal'
          },
        ],
        tableData:[]

}

排序方法：

sortchange(val){  //table排序
            console.log(val)
        var name = val.label
        var status = val.status   //asc 升序 desc 降序
         //按照表头，串给后台所需参数
        switch(name) {
          case '用户名':
            this.user_num_order = status
              break;
          case '人员姓名':
            this.real_name_order = status
              break;
          case '所属地区':
            this.region_order = status
              break;
          case '科室':
            this.department_order = status
              break;
          case '组别':
            this.group_s_order = status
              break;
          case '角色':
            this.role_order = status
              break;
          case '创建时间':
            this.create_date_order = status
              break;
        } 
        this.getList()   //重新初始化l列表
        },