TableList组件的跨页选择工具

说明

1、主要为了实现tableList的全部选择（所有list都选中），和选中当前页全部

使用

<template>
  <div>
    <table-list
      ref="roleList"
      :data="listName"
      :columns="columns"
      :list-loading="listLoading"
      class="dataTable"
      :total="total"
      :page-size="listQuery.pageSize"
      @currentChange="currentChange"
      :page-num="pageNum"
      :select="true"
    ></table-list>
  </div>
</template>
<script>
import TableSpreadSelectionTool from '@/utils/tableSpreadSelectionTool.js'
import { getRoleList } from '@/api/system/role'
let tableSpreadSelectionTool = null
export default {
  data() {
    return {
      listName: [],
      listLoading: false,
      total: '',
      listQuery: {
        pageSize: 15,
        currPage: 1,
      }
    }
  },
  mounted() {
    this.getCurData()
    tableSpreadSelectionTool = new TableSpreadSelectionTool({
      context: this, // 连接上下文
      tableRef: this.$refs['roleList'], // tableList组件
      listAllApi: () => getRoleList({ currPage: 1 }), // 接口
      listName: this.listName // tableList的data名，默认是list
    })
  },
  methods: {
    getCurData() {
      this.listLoading = true
      getRoleList(this.listQuery).then((response) => {
        if (response.success) {
          this.listName = response.result.list
          this.total = response.result.total
        }
        this.listLoading = false
      })
    },
    testFun() {
      // 获取table中选中的key值[1,2,5,7...]，这个key默认是id，可以传递需要的字段。
      const selectList = tableSpreadSelectionTool.getCheckedKeys() 
      const nameSelect = tableSpreadSelectionTool.getCheckedKeys('name') 
    }
  }
}

</script>

参数说明

属性

属性	描述	类型	可选值	默认值
context	上文的this， 必传。不会传看例子	Object	this	——
tableRef	上文的tableList组件的this，用ref传递，必传。不会传看例子	Object	——	——
listAllApi	返回Promise函数，接口调用，必传。不会传看例子	Function	——	——
listName	tableList的data数据，一般tableList都是分页的嘛，这就是当页数据。默认值是list，如果tableList的data为list就可以不用传这参数啦，不然就是必传	String	——	list

方法

方法名称	说明	参数
setChecked	手动选择哪些数据需要选择/取消.data(Array)是需要操作的数据，flag(Boolean)是布尔值，判断是选中/取消	（data, flag）
selectAll	所有数据全部选中，不是当前页面的数据，是所有得数据	——
clearAll	所有选中的数据取消勾选	——
getCheckedData	获取已被勾选的数据	——
getCheckedKeys	获取已被勾选的数据的某个字段组成的数组，默认是id	key（String）