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

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

猜你喜欢

转载自www.cnblogs.com/bien94/p/12182582.html
今日推荐