vue-element实现外部独立全选

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