el-table 分页多选功能共通方法抽取+实现

注意

该分页多选功能只支持当页全选

代码

1.抽取共通的分页逻辑

TableSpreadSelection.js

/**
 * data配置项
 * tableName: 表格ref名称
 * keyName: 表格row-key字段名称
 * el-tabl属性配置
 * :row-key="getRowKeys"
 * @select="handleCheckBox"
 * @select-all="handleSelectAll"
 */
export default {
  data() {
    return {
      // 选择的内容，存储data中keyName配置的key,一般为数据的id主键
      selectContent: []
    }
  },
  methods: {
    // 换页回显数据选择
    pageFeedEcho(list) {
      this.$nextTick(() => {
        list.forEach((item, index) => {
          if (this.selectContent.findIndex(v => v === item[this.keyName]) >= 0) {
            this.$refs[this.tableName].toggleRowSelection(
              this.$refs[this.tableName].data[index],
              true
            )
          }
        })
      })
    },
    // 该方法是单选时的方法
    handleCheckBox(rows, row) {
      if (this.selectContent.find((item) => item === row[this.keyName])) {
        // 下面这个filter方法就是删除的方法
        this.selectContent = this.selectContent.filter(
          (item) => item !== row[this.keyName]
        )
      } else {
        this.selectContent.push(row[this.keyName])
      }
    },
    // 该方法是当页全选
    handleSelectAll(rows) {
      if (rows.length) {
        rows.forEach((row) => {
          if (!this.selectContent.find((item) => item === row[this.keyName])) {
            this.selectContent.push(row[this.keyName])
          }
        })
      } else {
        this.typeList.forEach((row) => {
          this.selectContent = this.selectContent.filter(
            (item) => item !== row[this.keyName]
          )
        })
      }
    },
    // 下面的方法是设置table的行标识key的方法
    getRowKeys(row) {
      return row[this.keyName]
    },
    // 初始化,可控制页面第一次进入时，默认选中哪些
    initSelectContent (selectContent) {
      if (selectContent == undefined) {
        this.selectContent = []
      } else {
        this.selectContent = selectContent
      }
      
    }
  }
}

2.el-table标签属性配置

<el-table
   :ref="tableName"
   :data="typeList"
   :row-key="getRowKeys"
   @select="handleCheckBox"
   @select-all="handleSelectAll"
 >

3.data数据配置以及methods方法配置

<script>
export default {
	// 利用vue的mixins，混入我们刚刚抽取的分页逻辑代码
	mixins: [TableSpreadSelection],
	data() {
		return {
			// 表格数据
     		tableList: [],
			// 表格ref名称
		    tableName: 'myTable',
		    // 表格row-key字段名称，一般为我们数据的主键（不可重复)
		 	keyName: 'id'
		}
	},
	methods: {
    // 获取选中的数据的主键
    getSelection () {
      return this.selectContent
    },
    /** 查询列表，选择器方法名必为getList */
    getList () {
   	  // 后端获取列表数据，此处根据自己业务情况来
      listType().then(response => {
	        this.tableList = response.rows
	        this.total = response.total
	        // 换页回显，必带方法，参数为自己的列表数据
	        this.pageFeedEcho(this.tableList)
	      }
      )
    }
  }
}
</script>