表格常用方法(事件)的封装--单选/多选

表格常用方法(事件)的封装–单选/多选

---

之前基于el-table二次封装的表格可以自定义插槽展示
按理说已经可以满足所有的表格

但是表格还有很多操作, 比如单选多选排序等…

我们可以基于这个组件进行封装

单选/多选

element-ui自带的表格封装有自己的多选框

这样我们的表格就会出现一列多选框

但是这个是多选框, el-table没有单选框, 要实现单选效果需要我们自己实现

我们可以借助el-table封装好的事件和方法来实现多选框单选的效果

• select 事件: 当用户手动勾选数据行的 Checkbox 时触发的事件
• selection-change 事件: 当选择项发生变化时会触发该事件
• clearSelection 方法: 用于清空所有选择的Checkbox
• toggleRowSelection 方法: 改变某一行的选中状态

思路

通过父组件传递的一个props来判断当前表格是单选还是多选, 然后当触发select事件时, 判断是单选还是多选
----如果是单选则取消所有的勾选, 然后将当前row选中
----如果是多选则直接将数据抛出即可

实现代码

以下代码是在上一篇的表格组件的基础上继续封装!!!

<el-table
    :data="tableData"
    border
    class="table"
    ref="multipleTable"
    header-cell-class-name="table-header"
    @selection-change="handleSelectionChange"
    
    @select="select"
    @selection-change="handleSelectionChange"
>
	<el-table-column
        v-if="showSelectionColumn"
        type="selection" >
    </el-table-column>
	// ...
	// ...
	// ...
</el-table>

// 伪代码
// 在props里接收是否需要多选框和选框的类型(single or multiple)
props: {
	showSelectionColumn: {
      type: Boolean,
	  default: false
	}, // 是否显示多选框
	chooseType: {
      type: String,
      default: 'single'
    } // 多选框选择类型  single / multiple
}

// 伪代码
// 核心方法
/**
 * @param selection 已经选择的数组
 * @param row 当前选中行
 */
select(selection, row) {
  if(this.chooseType === 'single') {
    // 取消所有勾选
    this.$refs.dataTable.clearSelection();
    // 都没被勾选返回
    if(selection.length == 0) return;
    // 将当前行选中
    this.$refs.dataTable.toggleRowSelection(row, true);
    this.$emit('handle-selection', row);
  }else {
    this.$emit('handle-selection', selection);
    return;
  }
},
handleSelectionChange(val) {
    this.$emit('get-select-data', val);
}

这样我们就可以自己来规定我们的表格是单选还是多选啦!
欢迎大家一起讨论学习~