多选框动态控制table表单项的显示,且顺序不发生改变

需要实现的效果是根据多选框的选中状态动态控制table表单项的显示,而且顺序固定,不会发生改变.

之前写的也能实现效果但是表单顺序会发生改变于是做了优化,使用了elementUI中check多选框的true-label和false-label的用法,在百度上搜了半天没有答案,和同事讨论了一下得出结论

<el-checkbox :label="k.label" true-label='A' false-label="B" v-model="checkList[index]" checked> </el-checkbox>
这是下面代码中核心的一段,true-label=‘A’ false-label=“B”,使得选中时为A,未选中则为B,checked使所有多选框默认全部选中,则默认多选框的数据是[‘A’,‘A’,‘A’,‘A’,‘A’,‘A’,‘A’],如一图

<el-button-group class="equip-operation-btn">
      <el-button size="small">
                <i class="el-icon-refresh"></i>
      </el-button>
      <el-button size="small">
          <i class="el-icon-s-grid"></i>
          <el-dropdown trigger="click" :hide-on-click="false">
              <i class="el-icon-arrow-down el-icon--right"></i>
              <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="(k,index) in labelData" :key="index">
                      <el-checkbox :label="k.label" true-label='A' false-label="B"
                          v-model="checkList[index]" checked>
                      </el-checkbox>
                  </el-dropdown-item>
              </el-dropdown-menu>
          </el-dropdown>
      </el-button>
</el-button-group>

这是下图的代码

export default {
    data () {
        return {
            checkList: [],
            labelData: [
                { label: '编号', props: 'id' },
                { label: '名称', props: 'name' },
                { label: '仿真软件名称', props: 'wareName' },
                { label: '类型', props: 'type' },
                { label: '创建时间', props: 'creatTime' },
                { label: '创建者', props: 'creatUser' },
                { label: '修改时间', props: 'changeTime' },
                { label: '修改者', props: 'changeUser' },
                { label: '操作' }
            ],
            tableData: [
                {
                    id: '1',
                    name: '张三',
                    wareName: '仿真软件A',
                    type: '远程仿真软件',
                    creatTime: '2019-9-10',
                    creatUser: 'admin',
                    changeTime: '2019-9-11',
                    changeUser: 'admin'
                }
            ]
        }
    },
    // 计算监听多选框的选中状态
    computed: {
        datas () {
            var arr = []
            for (let i in this.checkList) {
                arr.push(this.checkList[i])
            }
            let data = []
            for (let i = 0; i < arr.length; i++) {
                var j = {}
                j.check = arr[i]
                data.push(j)
            }
            this.labelData.map((item, index) => {
                item.check = arr[index]
            })
            data = this.labelData
            return data
        }
    },