如何设置Element表格显示或者隐藏列

Element 表格点击复选框显示或隐藏列，效果如下：

主要步骤：

一、渲染复选框

代码语言：javascript复制

    <el-checkbox-group v-model="checkboxVal">
      <el-checkbox
        v-for="item in formTheadOptions"
        :label="item.prop"
        :key="item.prop"
      >{{item.label}}</el-checkbox>      
    </el-checkbox-group>

二、渲染表格

代码语言：javascript复制

    <el-table :key="key" :data="tableData" border style="width:500px;" height="230" id="table">
      <el-table-column prop="name" label="名称" fixed sortable>
        <template slot-scope="scope">
          <div v-if="scope.row.name>2">
            <span style="color:red;">{{scope.row.name}}</span>
          </div>
          <div v-else>
            <span style="color:green;">{{scope.row.name}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item,index) in formHead"
        :key="index"
        :label="item.label"
        :prop="item.prop"        
        :render-header="renderheader"
      ></el-table-column>
    </el-table>

三、监听复选框选择内容的变化，过滤表格的thead信息

代码语言：javascript复制

  watch: {
    checkboxVal(valArr) {
      console.log(valArr);
      this.formHead = this.formTheadOptions.filter(
        item => valArr.indexOf(item.prop) >= 0
      );
      this.key = this.key   1; 
    }
  },

注意：要设置key为不同的值，不复用之前的表格

数据结构

代码语言：javascript复制

const defaultFormThead = [
  { label: "第一列 firstColumn", prop: "col1" },
  { label: "第二列", prop: "col2" }
];
const defaultCheckedValue = ["col1", "col2"];

data() {
    return {
      checkboxVal: defaultCheckedValue,
      tableData: [
        {
          name: 1,
          col1: "11",
          col2: "12",
          col3: "13",
          col4: "11",
          col5: "12",
          col6: "13"
        },
        {
          name: 2,
          col1: "11",
          col2: "12",
          col3: "13",
          col4: "11",
          col5: "12",
          col6: "13"
        },
        {
          name: 3,
          col1: "11",
          col2: "12",
          col3: "13",
          col4: "11",
          col5: "12",
          col6: "13"
        },
        {
          name: 4,
          col1: "11",
          col2: "12",
          col3: "13",
          col4: "11",
          col5: "12",
          col6: "13"
        },
        {
          name: 6,
          col1: "16",
          col2: "126",
          col3: "136",
          col4: "116",
          col5: "126",
          col6: "136"
        },
        {
          name: 5,
          col1: "15",
          col2: "125",
          col3: "135",
          col4: "115",
          col5: "1225",
          col6: "1335"
        }
      ],
      key: 1,      
      formTheadOptions: [
        { label: "第一列 firstColumn", prop: "col1" },
        { label: "第二列", prop: "col2" },
        { label: "第三列", prop: "col3" },
        { label: "第四列", prop: "col4" },
        { label: "第五列", prop: "col5" },
        { label: "第六列", prop: "col6" }
      ],
      formHead: defaultFormThead
    };
  },

如果实现头部根据空格换行

代码语言：javascript复制

    renderheader(h, { column, $index }) {
      //console.log(column)
      if(column.property == "col1"){
        column.sortable = true
        column.minWidth = 150;
      }
      //column.minWidth = 150;
      let arr = column.label.split(" ")
      if(arr.length == 1){
        return arr[0]
      }
      else{
        return h(
        "div",
        { 'class': 'header-center' },
        [
          h("div",arr[0]),
          h("div",arr[1])
        ]
      );
      }
      //console.log(column.label.split(" "))      
    },

渲染 数据结构 element key 表格

0 人点赞