ElementUI的Table表格添加自定义头CheckBox多选框

Posted 2021-03-16 bien94

　　在ElmentUI的Table表格组件中，也许你会使用type为selection值的多选框功能，但是此时设置的label属性不生效，不能设置标题名称；有时候我们的需求就是要添加标题名称，那该如何处理呢？当然你可以对其样式做特殊处理，也可以自定义标题，本文将描述如何利用自定义标题来添加多选框和标题名称，特别是在该过程的踩过的雷和填补过的坑。

　　（一）需求：在Table表格中新增一列用于批量操作当前页的该列，例如：通过多选框来对批量设置该列的两种属性状态，选中时表示全部隐藏，不选中时表示全部显示，若部分隐藏、部分显示时多选框呈现第三种样式状态，一般是短横线表示。

　　（二）方案：利用Table表格column的header属性。

1. 利用插槽进行设置，即slot="header"，这样就可以在表头中自定义样式来；若不设置该属性，那么是对列内容进行设置。
2. 具体的代码如下：

   首先在工程目录下安装element，通过npm i element-ui -S命令安装即可；
   然后在工程中引入element，在main.js文件中添加这样两条语句：
   import ElementUI from ‘element-ui‘;
   Vue.use(ElementUI);
   
   

    

 

 

------20200112勉