首先我们看一下场景在table组件里默认选择第一项,如下图所示:
在这里插入图片描述

查看table文档后发现只有getCheckboxProps或许能修改checkbox

在这里插入图片描述

文档说是一个函数,然后就写一个方法,有一个默认的形参record
但是文档并没有解释怎么用,无奈继续在网上大浪淘沙,终于找到有一个defaultChecked属性
table里点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组。

 onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },

默认禁用disable 某项时,官方文档给出了例子:

    rowSelection() {
      const { selectedRowKeys } = this;
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
          }
        }),
      }
    }

主要是getCheckboxProps 里面的disabled 属性控制的。

默认选中某项时,需要 getCheckboxProps 里面的defaultChecked 属性控制:
业务场景:默认选择第一项,这时候就用到了默认勾选的属性

下面是我的核心代码
核心代码defaultChecked:record == this.gpuInfoList[0].

<a-table
          v-if="selectedKeyFlag"
          :bordered="false"
          :row-key="record => record.id"
          :loading="loadingGpu"
          :columns="columns"
          :data-source="gpuInfoList"
          :pagination="false"
          style="width: 850px"
          :row-selection="rowSelection"
          :locale="{ emptyText: '暂无可选服务器' }"
        >
          <span slot="gpuProductName" slot-scope="text">
            <ellipsis :length="32" tooltip>{{ text }}</ellipsis>
          </span>
          <span slot="cpuSize" slot-scope="text">
            <ellipsis :length="18" tooltip>{{ text + 'CPU' }}</ellipsis>
          </span>
          <span slot="memorySize" slot-scope="text">
            <ellipsis :length="18" tooltip>{{ text + 'GB' }}</ellipsis>
          </span>
          <span slot="price" slot-scope="text">
            <ellipsis :length="26" tooltip>{{ priceUnitFilter(text) }}</ellipsis>
          </span>
        </a-table>
computed: {
  rowSelection() {
      return {
        type: 'radio',
        onChange: this.onSelectChange,
        getCheckboxProps: this.getCheckboxProps
      }
    }
   },
 methods: {
       getCheckboxProps(record) {
      if (record == this.gpuInfoList[0]) {
        this.onSelectChange(null, [this.gpuInfoList[0]])
      }
      这也是业务,具体怎么写看你的业务情况
      return {
        props: {
          defaultChecked: record == this.gpuInfoList[0]
        }
      }
    },
 onSelectChange(selectedRowKeys, selectedRows) {
 	console.log(selectedRowKeys, selectedRows)
 	下面是我项目中的业务逻辑可以省略掉...
      const that = this
      that.selectedRows = selectedRows[0]
      this.$emit('handleConfigureBase', selectedRows[0])
      // 查询出具体的资源池,拿到存储类型
      if (selectedRows[0] && selectedRows[0].id) {
        const configId = selectedRows[0].id
        // console.log(configId, '-----------------')
        specConfigId({ specConfigId: configId }).then(res => {
          that.storageType =
            res && res.data && res.data.storageType !== null && res.data.storageType !== undefined
              ? res.data.storageType
              : null
          const storageItem = { id: res.data.storageType || null, name: res.data.storageTypeName || null }
          that.$emit('handleStorageType', storageItem)
          that.$emit('handleStorageSize', that.storageSize)
        })
      }
    },

基于此,我的需求实现了,你的呢?

又遇到一个新需求:进入到该页面不需要默认值,回退到给页面需要默认值
在这里插入图片描述

  getCheckboxProps(record) {
      return {   
        props: {
          defaultChecked: record.id ==(this.$route.query.configForm?JSON.parse(localStorage.getItem('conf')).id:null)
        } 
      }
    },

我是根据页面回退的$router判断,存在的话让record.id==所需要的默认条件不存在等于null就没有默认值
值得一提的是return必须要存在且里面不能写判断语句。
这样的新需求又解决掉了。
新需求Tabs切换时表格重新渲染
在这里插入图片描述
利用Tabs的destroyInactiveTabPane属性可摧毁隐藏的TabPane

<Tabs destroyInactiveTabPane />

实例

     <a-tabs default-active-key="2" @change="callback" destroyInactiveTabPane >
          <a-tab-pane key="2" tab="不限">
            <server-module :type="type" @onSelect="onSelect"></server-module>
          </a-tab-pane>
          <a-tab-pane key="0" tab="私有模板">
            <server-module :type="type" @onSelect="onSelect"></server-module>
          </a-tab-pane>
          <a-tab-pane key="1" tab="公有模板">
            <server-module :type="type" @onSelect="onSelect"></server-module>
          </a-tab-pane>
        </a-tabs>

又来一个需求,需要在表格里添加筛选,但是筛选完,会记录上一次所选择的项,而你又添加了默认选择第一项,这样每筛选一次就会有一次冲突。如下图所示:
在这里插入图片描述
首先我想到的是
1.变化key,可惜的是变化key后表格重新刷新,表头也重新刷新掉了,这样无法记录筛选状态,也无法点击降序。
2.点击筛选的时候,取消默认选择,还是很麻烦的操作一番后,还是不行,出现其他问题,默认进入页面时候的选中状态出问题了。
3.后面想到的筛选的时候,取消所选中行就是,然后就可以了
参考如下:

<template>
  <a-table :row-selection="rowSelection" :columns="columns" :data-source="data" />
</template>
export default { 
data () {
	return:{ 
      	 selectedRowKeys:[], // 批量选中的key
	}
}
computed:{
	 rowSelection() {
	 	const { selectedRowKeys } = this;
      	return {
      		selectedRowKeys, // 一定要加上这一行代码,清除才会有作用
        	onChange: (selectedRowKeys, selectedRows) => { 
         	 	this.selectedRowKeys = selectedRowKeys
	         
      		};
    	},
	},
	methods:{
		clearData () {
			this.selectedRowKeys = [] // 调用这个方法就有效果了
		}
	}
}

然后看我在我的项目中运用:
在这里插入图片描述

在这里插入图片描述
然后就顺利解决了,这样操作一番后,筛选的时候不记录选中状态,重新选中第一项。
值得一提的是,rowSelection 里配置了selectedRowKeys,表格更新key,选中状态也不会再改了,因为选中状态被记住了,之前切换数据我都是修改keyId,现在都只能把selectedRowKeys 置空了
在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐