ant design vue 表格table 默认选择几项getCheckboxProps
首先我们看一下场景在table组件里默认选择第一项,如下图所示:查看table文档后发现只有getCheckboxProps或许能修改checkbox文档说是一个函数,然后就写一个方法,有一个默认的形参record。但是文档并没有解释怎么用,无奈继续在网上大浪淘沙,终于找到有一个defaultChecked属性table里点击 checkbox 会触发onChange , 从而得到selected
首先我们看一下场景在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 置空了
更多推荐
所有评论(0)