vue表格多选、vue动态显示隐藏表格列、vue动态多列排序

写在前面

需求：表格列动态加载、动态控制列显示隐藏、行多选/动态排序、列与数据都是后端返回（文章末尾附上后端数据返回格式，列前端写静态也行）。

一、效果：

image.png

二、代码

 列过滤
    
      
      
      
      
      
        
      
export default {
    name: 'controlsTable',
    components: { Pagination },
    directives: { waves },
    data() {
      let checkPhones = (rule, value, callback) => {
        if (value == '') {
          callback(new Error('请输入联系电话'));
        } else {
          let phone = this.temp.phone;
          if (phone != '') {
            if (!/^1[3456789]\d{9}$/.test(phone)) {
              callback(new Error('请输入正确的手机号'));
            }else{
              callback();
            }
          }
        }
      };
      return {
        filterVisible: false,//过滤列操作隐藏
        colOptions:[],//列过滤options
        colSelect:[],//列过滤已选
        colData:[], //列全部
        multipleSelection:[],
        tableKey: 0,
        list: null,
        LoginName:name,
        name:'',
        people:'',
        total: 0
      }
    },
    created() {
      this.getListHeader();
      this.getList();
      
    },
    methods: {
          getListHeader(){ //获取表头
        patrolTableListHeader().then(response => {
          const {data} = response;
        this.colData=data;
        for(let j = 0,len = data.length; j < len; j++){
          this.colOptions.push(data[j].chn);
          if(data[j].showHeader==true){
            this.colSelect.push(data[j].chn);
          }
        }
      });
      },
      getList() {   //获取表数据
        patrolTableList(this.listQuery,this.LoginName).then(response => {
          this.list = response.data.items;
        this.total = response.data.total;
        setTimeout(() => {
          this.listLoading = false
      }, 1.0 * 1000)
      });
      },
     sortChange(data) {  //排序
        const { prop, order } = data;
        order == 'descending' ? this.listQuery.sort = '-' + prop : this.listQuery.sort = '+' + prop;
        patrolTableList(this.listQuery,this.LoginName).then(response => {
          this.list = response.data.items;
        this.total = response.data.total;
        setTimeout(() => {
          this.listLoading = false
      }, 1.0 * 1000)
      });
      },
      selectNu(val) {  //表格多选
        this.multipleSelection=[];
        this.rows=val;
        val.forEach(({id})=>{
          if(id){
            this.multipleSelection.push(id);
          }
        });
        return val;
      }
    },
    watch: {
      colSelect(newVal, oldVal) {
        if (newVal) {    //如果有值发生变化，即多选框的已选项变化
          let arr = this.colOptions.filter(i => newVal.indexOf(i) < 0)  // 未选中
          this.colData.filter(i => {
            if(arr.indexOf(i.chn) !== -1) {
              i.showHeader = false
            } else {
              i.showHeader = true
            }
          })
        }
      }
    }

三、后端返回数据格式

{ //列返回格式
    "messageCode": "000000",
    "message": "获取成功!",
    "data": [
        {
            "eng": "id",
            "chn": "序号",
            "showHeader": "true",
            "isSort": "true",
            "id": "1"
        },
        {
            "eng": "name",
            "chn": "站点名称",
            "showHeader": "true",
            "isSort": "true",
            "id": "2"
        }]
}
{ //表格数据格式
    "messageCode": "000000",
    "message": "获取成功!",
    "data": {
        "total": 1,
        "items": [
            {
                "id": 1,
                "conditions": {},
                "page": 0,
                "limit": null,
                "sortField": null,
                "tokenName": null,
                "createBy": 1,
                "createDate": "2019-11-05 07:01:58",
                "updateBy": 1,
                "updateDate": "2019-11-05 07:01:59",
                "remarks": null,
                "version": 3,
                "delFlag": "0",
                "name": "11",
                "foundTime": "2019-11-16 14:47:06",
                "people": " 王",
                "phone": "",
                "describes": "这是一个问题",
                "new": false,
                "loginName": null
            }
        ]
    }
}

备注：有问题可联系，看到会回复