ant design vue 表格table 默认勾选几项的操作

2024-09-28 09:11:37

为什么我同样的功能要用react 、vue 都写一遍？

啊我真是不是闲的蛋疼啊(～ o ～)~zZ

在 ant design vue 中，表格的第一列是联动的选择框

截一张官方文档图，图示最后一排就是禁用状态

点击 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: selectedRowKeys.includes(record.id) 的思路就是所有表格里所有包含已选中项的id，都给他默认选中

data () {
  return {
   // ...
   record: '',
   rowSelection: {
    selectedRowKeys: [],
    onChange: this.onSelectChange
   }
 },
 methods: {
   handleEdit (record) {
   //...省略我的业务逻辑
    if (record) {
    //...省略我的业务逻辑
    let selectedRowKeys =
     (record.roleIdList.length > 0 && record.roleIdList.split(',')) || [];
    this.rowSelection = {
     selectedRowKeys: selectedRowKeys,
     onChange: this.onSelectChange,
     getCheckboxProps: record => {
      return {
       props: {
        defaultChecked: selectedRowKeys.includes(record.id)
       }
      };
     }
    };
   } else {
    this.record = '';
    this.rowSelection = {
     selectedRowKeys: [],
     onChange: this.onSelectChange
    }
   }

 },
 onSelectChange (selectedRowKeys) {
   // 去重 Array.from(new Set(arr))
   this.rowSelection.selectedRowKeys = Array.from(new Set(selectedRowKeys));
 }
 }

ant design vue 版本和 react 版本写法略有不同，disabled 和 defaultChecked 都挂在了props 属性下。

补充知识：Ant-Design-Pro中Table组件rowSelection方法的一些坑

如下所示：

<Table rowSelection={rowSelection} columns={columns} dataSource={data} />

在 <Table/> 组件中有 rowSelection={rowSelection} 方法，可以让Table的第一列成为联动的选择框。

API中说到通过 rowSelection.selectedRowKeys 来控制选中项。比较坑的是，selectedRowKeys 控制的只是dataSource当前的顺序编号。

一定要加上rowKey="id"或者rowKey={record => record.id}，后来经过多次调试发现很多BUG都跟这个参数有关，不然会导致联动的选择框状态异常。id可以自定义为dataSource中的某个值。

以上这篇ant design vue 表格table 默认勾选几项的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

Ant design vue中的联动选择取消操作

项目中会遇到需求就是table表格中选中在侧边展示,侧边删除,table中选中取消的联动选中 ui框架:Ant design vue 组件:table 和 tag html中 <template v-for="tag in dataType">  <a-tag :key="tag.id" closable :afterClose="() => deleteDataType(tag
Ant design vue table 单击行选中勾选checkbox教程

最近了解Ant design 设计table 单击行选中checkedbox功能,相比于element的 @row-click 再触发toggleRowSelection,ant design的api就没那么清晰了,言归正传期望:Ant design table 单击行选中勾选checkedbox 实现: 单选: onClickRow(record) { return { on: { click: () => { let keys = []; keys.push(record.id); th
Ant Design Pro 之 ProTable使用操作

标签<ProTable> Pro-Table 是阿里Ant Design Pro V4版本,在Table基础上再封装的一个组件,包含完整的增删改查逻辑,不用复杂的操作,简单几个配置即可实现官网Api地址 https://protable.ant.design/ 示例 V4版本刚出不久,网上的教程还比较少,踩了不少坑,把自己学习过程分享出来,希望可以帮到你创建项目(需要node.js及npm环境) npm config set registry https://registry.npm.ta
Ant-design-vue Table组件customRow属性的使用说明

官网示例使用方式 // 表格中加入customRow属性并绑定一个custom方法 <a-table rowKey="stockOrderCode" :columns="columns" :dataSource="dataSource" :pagination="pagination" :customRow="customRow" > </a-table> // methods中定
ant design vue 表格table 默认勾选几项的操作

为什么我同样的功能要用react .vue 都写一遍 ? 啊我真是不是闲的蛋疼啊(- o -)~zZ 在 ant design vue 中,表格的第一列是联动的选择框截一张官方文档图,图示最后一排就是禁用状态点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组. onChange: (selectedRowKeys, selectedRows) => { console.log(`selectedR
解决ant design vue 表格a-table二次封装,slots渲染的问题

目的就是对a-table进行二次封装,但是在如何显示a-table的slot时遇到了问题,原本想法是在a-table内把$slots都渲染,期望在使用该组件时能正确渲染,然而...并不会正确渲染 <template> <a-table bordered :scroll="{ x: scrollX, y: 600 }" v-bind="{...$attrs, ...$props, ...{dataSource: body, columns: header}}&
ant design vue的table取消自带分页问题

目录 ant design vue的table取消自带分页题外话: ant design vue table分页 ant design vue table分页设置 ant design vue的table取消自带分页在我们使用ant design vue的table组件的时候会发现: 组件使用如示: <a-table :columns="columns" :data-source="data" bordered></a-table> 显然
Ant Design Vue中的table与pagination的联合使用方式

目录 Ant Design Vue中table与pagination联合使用 ant.design.vue中table的使用说明 table的创建 table之columns table之dataSource table之loading table之scroll table之rowKey table之rowSelection table之customRow table之change Ant Design Vue中table与pagination联合使用表格table使用链接:ant desig
Element 默认勾选表格 toggleRowSelection的实现

官网尽管提供了toggleRowSelection方法,但没有提供demo实例. 通过了解,结合vue的特殊属性ref引用到Dom元素上,再执行dom上的toggleRowSelection方法. 以下通过三种不同的数据来源实现table默认勾选对应的列: 1.固定写在data数据里: 注意el-table上有一个ref="table"的属性 <div id="app"> <template> <el-table :data="
Ant Design Vue 修改表格头部样式的详细代码

在网上搜了好多修改表格头部样式的,最后自己摸索出来,分享给大家,最后附上完整代码.首先用到的是customHeaderRow这个API,类型是一个函数 1.HTML部分 <a-table size='small' // 样式大小 :columns="columns" :data-source="data" bordered :pagination="false" // 不显示页数 :customHeaderRow="customR
design vue 表格开启列排序的操作

开启排序 1.本地数据排序 column数据设置,需要开启的列设置sorter: (a, b) => a.address.length - b.address.length, 自定义排序方法 2.服务端排序sorter设置true 点击排序,表格触发change方法,接受参数 change (pagination, filters, sorter, { currentDataSource }) 第三个参数就是排序信息 {field, order} <a-table :columns="
ant design vue中表格指定格式渲染方式

注意点:定义的columns一定要写在data中,否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别渲染方法1: 指定渲染函数: const columns = [ { title: '排名', dataIndex: 'key', customRender: renderContent // 渲染函数的规则 }, { title: '搜索关键词', dataIndex: 'keyword', customRender: (text, row, index) => { if (index
ant design vue嵌套表格及表格内部编辑的用法说明

实现效果: 因为pro手脚架中封装的s-table不支持expand和expandedRowsChange事件,无法实现根据展开节点获取其内部数据的需求,因此直接使用a-table组件表格外层可以翻页,查询携带页码参数 <a-table size="default" rowKey="dict_id" //根据自己数据内部关键针设定 ref="table" @expandedRowsChange="expandedRowsChan

ant design vue 表格table 默认勾选几项的操作

相关推荐

随机推荐