根据checkbox勾选动态渲染表头

2019-04-29

1.png

思路

首先表头是个数组,在渲染el-table-column时,
遍历表头数组取得所有可以渲染的column
设置v-if来控制column的显示隐藏,通过判断遍历的表头是否已被checkbox选中
当checkbox变更后,触发方法使v-if获得的值取反,并修改表头数组的值

这里仅贴出核心代码

checkbox组件

      <!-- 勾选属性 -->
      <div id="checkbox"
>
        <span v-for="title in header"
              :key="title"
              v-if="hackReset">
          <el-checkbox :label="title"
                       v-if="title=='NAME'?false:true"
                       @change="handleChange(select_show,title)"></el-checkbox>
        </span>
      </div>

table组件

      <!-- 表格 -->
      <el-table :data="tabledata">
        <el-table-column :label="title"
                         v-for="title in header"
                         :key="title"
                         v-if="isInArray(select_show,title)">
          <template slot-scope="scope">
            <div v-if="title === 'NAME'">
              <span v-for="(v,k) in scope.row[title]"
                    :key="k" />
            </div>
            <div v-else>
              {{scope.row[title]}}
            </div>
          </template>
        </el-table-column>
      </el-table>

methods

    methods: {
      handleSelected() {
        this.header = []
        // 第一个表头始终是'NAME'
        this.header.push('NAME')
        // 设置表头
数组
        for (const i in this.selected) {
          this.header.push(this.selected[i].join('/'))
        }
        // 强制刷新checkbox状态
        this.hackReset = false
        this.$nextTick(() => {
          this.hackReset = true
          this.select_show = ['NAME']
        })
      },
      // 判断value是否在arr中
      isInArray(arr, value) {
        for (var i = 0; i < arr.length; i++) {
          if (value === arr[i]) {
            return true
          }
        }
        return false
      }
,
     // 如果已经被选中过,删除;否则添加
     handleChange(arr, value) {
        if (this.isInArray(this.select_show, value)) {
          var index = arr.indexOf(value)
          if (index > -1) {
            arr.splice(index, 1)
          }
        } else {
          this.select_show.push(value)
        }
      }
    }

标题:根据checkbox勾选动态渲染表头
作者:fish2018
地址:http://www.devopser.org/articles/2019/04/29/1556527529497.html