ant design vue 表格table 默认选择几项getCheckboxProps

首先我们看一下场景在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 checkedname: record.name,}}),}}

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

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

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

<a-tablev-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 = thisthat.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: nullconst 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 置空了

ant design vue 表格table 默认选择几项getCheckboxProps相关推荐

Ant Design Vue 表格筛选时只进行前台的按页筛选修改为后台的全局筛选
原因分析在我们使用 Ant Design Vue 表格筛选功能时会发现,如果只是按照例子来,只是前端的按页筛选,并不能都进行全局筛选,原因有两点: 1.我们筛选的时候,只是进行前端的数据过滤,并没有 ...
Ant Design Vue 的 table 隐藏特定列
Ant Design Vue 的 table 隐藏特定列 Ant Design Vue 的 table 隐藏列主要是通过列的 colSpan属性和 customRender 实现的,这两个属性官网的 ...
ant design vue 表格中时间戳转换成时间格式显示
ant design vue 表格中时间戳转换成时间格式显示原始数据表格如上图,因为接口传递过来的时间是10位int类型的时间戳格式,所以前端需要我们把时间格式化. step1 安装moment n ...
【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
1,首先在vue2项目中安装ant design vue组件 npm install ant-design-vue@1.7.2 2,a-cascader组件在页面中的使用 <template&g ...
Ant Design Vue 表格内编辑（附完整源码及效果图）
效果图: 实现关键代码就是表单的 columns 属性对象下标的 scopedSlots: scopedSlots: {customRender: '' } 实现完整代码: <template& ...
ant design vue给table设置斑马条纹样式
效果图 <a-table :columns="columns" :data-source="data"></a-table> css设置 ...
使用ant design vue 中table组件运行时not found: Error: Can't resolve 'reqwest' in 'D:\vue\antd-demo01\src\com
最近使用table时按照官网api使用table报了上面这个错误 1.只需要安装无法找到文件就可以正常运行了 2.命令行cd进入项目文件 3.运行npm install --save reqwest ...
ant design vue：upload打开选择文件弹框前弹出确认框
看antd文档,刚开始我用得beforeUpload来实现,勉强能完成我想要的功能,但是流程上不完美,需要先选择了文件,才能弹出确认框,但是我的确认框其实跟文件没有关系,我想要先弹确认框再打开文件选择 ...
html只选择年份,ant design vue 日期选择器只选择年份
mode="year" placeholder="请选择年份" format='YYYY' v-model="form.yearQuarter&quo ...

ant design vue 表格table 默认选择几项getCheckboxProps

ant design vue 表格table 默认选择几项getCheckboxProps相关推荐

最新文章

热门文章