AntDVue 表格全选反选

AntDVue

公司前端用 Ant Design of Vue为样式。

业务需求如下：
table表格实现全选反选

主要组件讲解：
会用到如下table组件，row-selection还请仔细阅读官方文档

子组件template

   简易table表格封装
	<a-table
	  bordered
	  :row-class-name="rowClass"
	  :loading="loading"
	  :pagination="false"
	  :data-source="data.list"
	  :columns="columns" 		
	  :row-selection="{
	    selectedRowKeys: selectedRowKeys,
	    onChange: onSelectChange
	  }"
	>
	//插槽单独处理表格显示开关按钮这种，看业务需求添加
	  <template slot="status" slot-scope="row, index">
	    <a-switch
	      :checked="row.status === 1"
	      checked-children="启用"
	      un-checked-children="停用"
	      @click="checked => onSwitchClick(checked, row, index)"
	    ></a-switch>
	  </template>
	  <div slot="action" slot-scope="row">
	    <a-button type="link" @click="operation(row)">
	      编辑
	    </a-button>
	  </div>
	</a-table>

子组件js

//data值如下
	  selectedRowKeys:[],  //存储选中下标
//methods
	onSelectChange(selectedRowKeys) {
		//将选中值进行赋值给selectedRowKeys 为了页面展示
		 this.selectedRowKeys = selectedRowKeys
		 //将选中值抛给父组件
		 this.$emit('rowSelectionChange', this.selectedRowKeys)
	},

父组件template

  <a-row>
    <a-col :span="4">
      <a-button type="primary" @click="rowSelectionAll"> 全选 </a-button>
    </a-col>
    <a-col :span="4">
      <a-button type="primary" @click="rowSelectionInvert"> 反选 </a-button>
    </a-col>
  </a-row>
 <MyTable
      ref="myTable"
      :columns="columns"
      :dataSource="data"
      :operation="operation"
      :loading="loading"
      @rowSelectionChange="rowSelectionChange"
     
    >
    </MyTable>

父组件js

//data
columns: [		  //表格列的配置描述
    {
      title: '科室名称',
      key: 'name',
      ellipsis: 10
    },
    {
      title: '科室简介',
      key: 'synopsis'
    },
    {
      title: '科室位置',
      key: 'location'
    },
    {
      title: 'HIS-ID',
      key: 'his'
    },
    {
      title: '信息同步',
      key: 'message'
    },
    {
      title: '号源同步',
      key: 'headstream'
    },
    {
      title: '状态',
      key: 'state'
    },
    {
      title: '操作',
      key: 'action',
      type: 'action',
      scopedSlots: { customRender: 'action' }
    }
  ],
  data: [	//具体table数据
    {
      name: '科室名称1',
      synopsis: '科室简介',
      location: '科室位置',
      his: 'HIS-ID',
      message: '信息同步',
      headstream: '号源同步',
      state: '状态'
    },
    {
      name: '科室名称2',
      synopsis: '科室简介',
      location: '科室位置',
      his: 'HIS-ID',
      message: '信息同步',
      headstream: '号源同步',
      state: '状态'
    },
    {
      name: '科室名称3',
      synopsis: '科室简介',
      location: '科室位置',
      his: 'HIS-ID',
      message: '信息同步',
      headstream: '号源同步',
      state: '状态'
    },
    {
      name: '科室名称4',
      synopsis: '科室简介',
      location: '科室位置',
      his: 'HIS-ID',
      message: '信息同步',
      headstream: '号源同步',
      state: '状态'
    }
  ],
  rowSelectionList:[]   
//js 此处为全选，反选主要业务逻辑处理
	// 选中项
	rowSelectionChange(val) {
      //子组件选中的下标进行存储
	  this.rowSelectionList = val || []
	  //这一步是为了拿到data数据中的name 组成新的数组(此处我是做测试用所以拿的name,具体看后台需要什么字段)
	  const res = this.data
	    .filter((it, index) => this.rowSelectionList.some((i) => i == index))
	    .map((m) => m.name)
	  console.log(res)
	},
	// 全选
	rowSelectionAll() {
	//(this.$refs.myTable as any)这样写是因为我用的ts语法，否则会报错
	//普通js这样this.$refs.myTable.onSelectChange()即可 
	  ;(this.$refs.myTable as any).onSelectChange(
	    this.data.map((it, index) => index)
	  )
	},
	// 反选
	rowSelectionInvert() {
		//res返回找出没选中的项
	  const res = this.data.filter((it, index) => {
	    return !this.rowSelectionList.some((i) => i === index)
	  }) as any
	  //_.findIndex是lodash的方法,取出data中符合res项的下标值
	  const index = res.map((it) => {
	    return _.findIndex(this.data, function (o) {
	      return o.name === it.name
	    })
	  })
	  //最后还是调用子组件方法，传递选中项下标
	  ;(this.$refs.myTable as any).onSelectChange(index)
	}

效果如下