vue+element实现table外部的全选按钮
- 在项目中，我们可能会遇到在列表的外面有一个独立的全选按钮，接下来就描述一下具体的实现过程
- 首先我们读element的文档可以知道，el-table上是自带toggleAllSelection和clearSelection这两个方法的
- 一个是用于多选表格，切换所有行的选中状态
- 一个是清空用户的所有选择
- 所以就可以通过ref链的形式，在点击外部的独立按钮的时候，触发相应的方法来实现列表全选与否。
- 我们可以知道，el-checkbox上有一个change事件，是自带一个参数的，选中为true，非选中为false，此时不难想到，可以利用这个参数作为一个表示，来调用el-table上的那两个方法
// 点击独立全选按钮时，方法中做的事情
selectBottom ? this.$refs.multipleTable.toggleAllSelection() : this.$refs.multipleTable.clearSelection()
- 此时我们会发现，虽然实现了点击独立按钮来控制列表全选与否，但是这个独立的按钮样式却不会发生变化，这是为什么呢
- 读文档，第一想到的是利用一个标识来控制checked的true和false，来实现全选的样式改变（不过这样不行，也不清楚为啥）
- 最后是可以通过改变el-checkbox的绑定值——value来实现控制样式
- 此时我们会发现，已经可以发生样式的改变了，但是通过点击el-table中自带的全选和每列项，并不会改变外部按钮的状态
- 这个时候可以通过el-table上的事件来完成了
- select——当用户手动勾选数据行的 Checkbox 时触发的事件
- select-all——当用户手动勾选全选 Checkbox 时触发的事件
- 这两个方法可以拿到一个参数，这个参数里放的就是列表中所有的数据，可以通过判断参数的length是否等于所有数据的length来控制el-checkbox的value，来实现列表中的选中和外部独立选中的关联。
这时候，我们利用element来实现一个外部独立的全选列表按钮就完成了
<el-table
ref="multipleTable"
v-loading="listLoading"
:data="dataList"
@select-all="selectTop"
@select="selectTop"
></el-table>
<el-checkbox
:value="select"
label="全选"
name="type"
@change="toggleSelection"
/>
// 点击列表选中
selectList(selection) {
this.select = selection.length === this.dataList.length
},
// 独立全选
toggleSelection(selectBottom) {
selectBottom ? this.$refs.multipleTable.toggleAllSelection() : this.$refs.multipleTable.clearSelection()
this.select = selectBottom
},
如果有出入的地方，欢迎指出，立马改正，有想一起学习前端的小伙伴，欢迎加QQ1356770685
