ant-design-vue ant-table 实现默认选中 且不影响之后的勾选切换

一般情况下都是加载出来列表之后进行全选的操作,这样ant-table官网的一般选中就能满足,可是公司领导给的需求是列表数据一加载就是默认选中的操作。使用

:row-selection="{ selectedRowKeys: selectedRowKey, onChange: onSelect, getCheckboxProps: getCheckbox }">

当中的

selectedRowKeys: selectedRowKey, onChange: onSelect

这两个属性结合,默认将数据的ID 数组赋值selectedRowKey 页面加载出来是全选的效果,但是切换点击勾选失效,不能使用。

经过多方查找看到网友使用的时候加有这个参数

getCheckboxProps: getCheckbox

js部分的代码是

const getCheckbox = (record) => {
	return {
		defaultChecked: selectRows.value.some(selectedRecord => selectedRecord.modalInfo.shopCarId === record.modalInfo.shopCarId)
	};
}

使用的时候js代码

const onSelect = (selectedRowKeys, selectedRows) => {
	console.log(selectedRowKeys, selectedRows, '批量编辑');
	selectedRowKey.value = selectedRowKeys
	selectRows.value = selectedRows
}
watch(() => selectRows.value.length, () => {
	num1.value = 0
	countnum2.value=0
	allprice.value = 0
	selectRows.value.forEach((item) => {
		num1.value++
		countnum2.value += item.number
		if (item.totalPrice != null && item.textPrice !== '人工报价中' && item.totalPrice != 0) {
			allprice.value = allprice.value + (item.totalPrice * 1)
		}
	})
})

 还有这个在合适的位置加

selectedRowKey.value = selectRows.value.map(item => item.modalInfo.shopCarId)

不然,选中效果不会有。在此感谢 vue ant-design中table选中默认项的实现_row-selection 默认勾选_reembarkation的博客-CSDN博客

给了很大的帮助

### 实现点击行选中的功能 为了实现Ant Design Vue 的 `a-table` 组件中通过点击行来选中某一行的功能,可以利用组件提供的事件处理机制以及自定义属性。具体来说,在 HTML 部分可以通过设置 `:row-selection="rowSelection"` 来启用行选择模式,并在 JavaScript 中配置相应的逻辑。 下面是一个简单的例子展示如何实现这一特性: ```vue <template> <a-table :columns="columns" :data-source="dataSource" :row-selection="rowSelection"></a-table> </template> <script> export default { data() { return { columns: [ // 定义列的信息... ], dataSource: [], // 数据源数组, selectedRowKeys: [] // 这里存储被选中的行键值 }; }, computed: { rowSelection() { return { onChange: (selectedRowKeys, selectedRows) => { console.log(`Selected Row Keys: ${selectedRowKeys}`, 'Selected Rows:', selectedRows); }, getCheckboxProps: record => ({ props: { disabled: record.name === 'Disabled User', // 可以禁用某些特定条件下的选项框 } }) }; } } }; </script> ``` 上述代码片段展示了基本框架[^1]。对于更复杂的场景,比如单击整行触发选中效果而是仅限于勾选框,则可以在 `<a-table>` 标签内增加 `@row-click` 或者使用 `customRow` 属性来自定义每一行的行为,如下所示: ```html <a-table ... :custom-row="handleClick"> <!----> <a-table ... @row-click="onRowClick"> ``` 其中 `handleClick` 函数用于控制每行的点击行为,而 `onRowClick` 则可以直接响应整个表格上的任意行点击事件[^2]。 如果希望进一步增强用户体验,还可以考虑加入样式变化以直观反映当前已选状态。这通常涉及到 CSS 类名的操作,例如给定一个函数返回同的类名称作为参数传递给 `:rowClassName` 属性[^3]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值