动态展示表格

demo.gif

表格数据过多，根据需要动态选择数据进行展示。

使用vue全家桶，组件使用element自带的表格和多选

// 表格
<el-table
          v-loading="isLoading"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column fixed type="selection" width="29" style="word-break: normal;"></el-table-column>
          <template v-for="item in listItems">
            <el-table-column
              v-if="item.checked"
              :prop="item.prop"
              :label="item.label"
              :key="item.label"
              :width="item.width"
            >
              <template slot-scope="scope">
                /* 项目中可能需要把某列的不同值，显示不同颜色 */
                <div v-if="item.label === '是否需要改变颜色的表头'">
                  <span class="color-green" v-if="scope.row[item.prop] === 1">是</span>
                  <span class="color-red" v-else>否</span>
                </div>
                <div v-else>{{scope.row[item.prop]}}</div>
              </template>
            </el-table-column>
          </template>
          <el-table-column label="操作" width="80" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" class="table-btn" size="mini" @click="tableItemDetails(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>

// 多选框
<el-checkbox-group v-model="checkList">
  <el-checkbox
   v-for="item in listItems"
   :label="item.prop"
   :disabled="item.disabled"
   :key="item.label"
   >{{item.label}}</el-checkbox>
</el-checkbox-group>

// 初始化两个list
// checkList 是表格默认显示的值
checkList: ['aaa', 'ccc', 'eee'],
// listItems 是最重要的，一是为了复选框展示，二是为了表格的表头展示
// label 是表格表头名字、prop是表头的值、disabled多选框是否为默认值，默认则不可修改、
// checked是多选框是否选中，选中则在表格中展示，否则不显示。width为了表格样式优化，我可以给表格设置合适的宽度
      listItems: [
        {
          label: '盒号',
          prop: 'aaa',
          disabled: true,
          checked: true,
          width: 120
        },
        {
          label: '件号',
          prop: 'bbb',
          disabled: false,
          checked: false,
          width: 120
        }]

// 多选框change事件
    toggleTableColumn() {
      // 切换多选是否展示
      this.listItemShow = !this.listItemShow
      // 根据选中的值，修改listItems中表格应该显示的项
      this.listItems.forEach(item => {
        if (!item.disabled) {
          if (this.checkList.indexOf(item.prop) !== -1) {
            item.checked = true
          } else {
            item.checked = false
          }
        }
      })
    }