在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); 接着,我们在App.vue文件中进行测试,添加如下代码:
<template>
<div id="app">
<img src="./assets/logo.png">
<el-table :data="tableData" style="width: 100%">
<el-table-column
label="姓名"
prop="name">
</el-table-column>
<el-table-column
label="性别"
prop="sex">
</el-table-column>
<el-table-column align="right">
<template slot="header" slot-scope="scope">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
@change="handleCheckAllChange">隐藏</el-checkbox>
</template>
<template slot-scope="scope">
<el-checkbox v-model="scope.row.checked" @change="handleCheckOneChange">隐藏</el-checkbox>
</template>
</el-table-column>
</el-table>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
tableData: [{
name: '李时珍',
sex: '男',
checked: false
}, {
name: '花木兰',
sex: '女',
checked: true
}],
checkAll: false,
isIndeterminate: true
}
},
methods: {
handleCheckAllChange (val) {
console.info('check all change is ', val)
this.isIndeterminate = false
this.tableData.forEach(item => {
item.checked = val
})
},
handleCheckOneChange (val) {
console.info('check one change is ', val)
let totalCount = this.tableData.length
let someStatusCount = 0
this.tableData.forEach(item => {
if (item.checked === val) {
someStatusCount++
}
})
this.checkAll = totalCount === someStatusCount ? val : !val
this.isIndeterminate = someStatusCount > 0 && someStatusCount < totalCount
}
}
}
</script>
- 运行后的效果图如下:
在上图中,我们可以通过表头的隐藏多选框来批量设置列表数据,当我们选中上图“表头隐藏”多选框时,列表中的两个“隐藏”多选框都会被选中;当我们取消“表头隐藏”多选框时,列表中的两个“隐藏”多选框会同时被取消选中;当我们同时选中列表中的两个“隐藏”多选框时表头的“表头隐藏”多选框也会被选中;当我们同时取消列表中两个“隐藏”多选框时表头的“表头隐藏”多选框也会被取消选中;当列表中的两个“隐藏”多选框,一个被选中,另外一个没有被选中时表头的“表头隐藏”多选框会呈现第三种状态,样式本应该会是一条短横线,但是在上图中却没有显示预期的效果,这是在safari浏览器的效果,但是在chrome浏览器中会表现预期的第三种状态效果的。
4. 挖坑说明:
其实之初在添加这个功能的时候我是没有添加slot-scope="scope"属性,因为在开发工具中提示红色的波浪形,表示
“[vue/no-unused-vars]
'scope' is defined but never used.eslint-plugin-vue
Peek Problem
No quick fixes available”,其实这只是eslint插件的语法检查,当时我就去掉了;此外,当时还没有添加v-model="checkAll"属性,只是添加@change事件响应,此此时操作界面时表头多选框的状态能够正常切换;但是当我把v-model="checkAll"属性添加后,操作界面时发现表头的多选框的状态只跟初始值checkAll有关,若checkAll初始值为false,那么表头的多选框就会一直是取消选中的状态;若checkAll初始值为true,那么表头的多选框就会一直是选中的状态。纳闷了很久,最后我无意中添加上slot-scope="scope"这个属性,操作界面,结果表头的多选框能够正常切换状态了。这就是我给自己挖的一个坑,在这里我对Vue中的插槽功能还不是很熟悉吧,需要补一补这方面的知识。不过,最后还是自己把这个坑给填上了。
5. 拓展
在自定义其它类型的表头时可以参考上述流程,框架是类似的,千万不要把插槽属性省略了,否则的话会有奇怪的坑出现。
------20200112勉
阅读是一种修养,分享是一种美德。