在 ElmentUI 的 Table 表格组件中, 也许你会使用 type 为 selection 值的多选框功能, 但是此时设置的 label 属性不生效, 不能设置标题名称; 有时候我们的需求就是要添加标题名称, 那该如何处理呢? 当然你可以对其样式做特殊处理, 也可以自定义标题, 本文将描述如何利用自定义标题来添加多选框和标题名称, 特别是在该过程的踩过的雷和填补过的坑.
(一) 需求: 在 Table 表格中新增一列用于批量操作当前页的该列, 例如: 通过多选框来对批量设置该列的两种属性状态, 选中时表示全部隐藏, 不选中时表示全部显示, 若部分隐藏, 部分显示时多选框呈现第三种样式状态, 一般是短横线表示.
(二) 方案: 利用 Table 表格 column 的 header 属性.
利用插槽进行设置, 即 slot="header", 这样就可以在表头中自定义样式来; 若不设置该属性, 那么是对列内容进行设置.
具体的代码如下:
首先在工程目录下安装 element, 通过 NPM i element-ui -S 命令安装即可;
然后在工程中引入 element, 在 main.JS 文件中添加这样两条语句:
- import ElementUI from 'element-ui';
- vue.use(ElementUI);
------20200112 勉
来源: http://www.bubuko.com/infodetail-3377382.html