vue的el-table通过表头勾选实现列自定义

近期要实现一个el-table的表头自定义功能，可以根据复选框的选中或者不选实现表格列的显示隐藏，自定义展示表格列表，通过网上的一些例子来实现了一下。
实现的效果如下：

WechatIMG15.jpeg

WechatIMG14.jpeg

代码如下：
1. table表格部分

2.数据部分

data () {
  return {
      list: [
        {
          id: '上海市普陀',
          zbh: '上海市普陀',
          kind: '上海市普',
          qd: '上海市普',
          user: '上海市普',
          id1: '1上海市普',
        }
      ],
      colOptions: ['上海市普', '上海市普22', '核心存款时点', '所属机构编号1'], // 多选框的选择项
      colSelect: ['上海市普', '上海市普22', '核心存款时点', '所属机构编号1'], // 多选框已选择的内容，即表格中显示的列
      // istrue属性存放列的状态
      colData: [
        { title: '上海市普', istrue: true },
        { title: '上海市普22', istrue: true },
        { title: '核心存款时点', istrue: true },
        { title: '所属机构编号1', istrue: true }
      ],
      tableHeader: [
        { label: '上海市普', key: 'zbh' },
        { label: '上海市普22', key: 'kind' },
        { label: '核心存款时点', key: 'qd' },
        { label: '所属机构编号1', key: 'id1' }
      ]
  }
}

3.方法

watch: {
    colOptions(newVal, oldVal) {
      if (newVal) { // 如果有值发生变化，即多选框的已选项变化
        var arr = this.colSelect.filter(i => newVal.indexOf(i) < 0) // 未选中
        this.colData.filter(i => {
          if (arr.indexOf(i.title) !== -1) {
            i.istrue = false
          } else {
            i.istrue = true
          }
        })
      }
    }
  }