专栏首页前端之攻略如何设置Element表格显示或者隐藏列

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

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

主要步骤:

一、渲染复选框

    <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>

二、渲染表格

    <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信息

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

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

数据结构

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
    };
  },

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

    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(" "))      
    },

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • element 嵌套数据合并单元格两种处理方法

    通过table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面是{row, column, rowIndex, columnInde...

    tianyawhl
  • 完整MUI 例子 原

    假如3个页面的例子,第一个是index.html,第二个html文件夹中建2个页面moive_detail.html,第三个演员详情页cast_detail.h...

    tianyawhl
  • Element 表格导出为Excel表格

    在页面点击导出按钮时可以正常导出,但是如果左边有固定的列,相同的数据会导出2遍,可以做如下修改:

    tianyawhl
  • 树莓派随身工具箱:中间人劫持获取控制权

    上文讲解了树莓派随身工具箱的环境搭建,这段时间又对其进行了一些优化,主要是从便携美观上面改进。同时,在实际使用中发现了一些问题,并做了小小的改动。

    FB客服
  • Java 中的Exception 有什么用?

    Exception 的作用,这个问题是一个开放性的问题,没有标准的答案,不同经历的人可能会有不同的答案,也就是说经历过惨痛的经历后,才会对Java Except...

    ObjectiveSQL
  • Python 三种遍历目录的方法,轻松帮你找出隐藏文件

    无论在 Windows 系统中还是 Linux 系统中,都存在着隐藏文件以及隐藏文件夹。隐藏文件夹一般是系统关键性目录,例如 Windows 系统中的 C 盘中...

    猴哥yuri
  • iOS读写安全

    给属性添加atomic 可以保证属性的setter和getter原子性操作,也就是保证setter和getter内部是线程同步的

    老沙
  • 中国为什么能在一些信息技术方面赶超甚至领先西方?

    很多西方的国家和民众对于中国的认知还是在80,90年代,觉得这个国家还是非常贫瘠民众精神追求不高,还是有很多的西方媒体习惯于抹黑中国,每次中国发生个什么事情总会...

    程序员互动联盟
  • 小结ES6基本知识点(三):类与继承

    ES6初学者,通过阅读本文可对ES6知识点有个大体的概念,强烈建议阅读阮一峰大大的ES6入门。

    前端林子
  • USB HOST与 USB OTG的区别及工作原理

    在SmartQ 7上面,同时存在USB HOST与 USB OTG两个接口,我想问一下,这两个接口有什么区别么?我怎么认为HOST属于是多余呢? 麻烦高手解答,...

    233333

扫码关注云+社区

领取腾讯云代金券