antd vue table控件的使用（二）

最新推荐文章于 2025-11-26 15:39:19 发布

原创最新推荐文章于 2025-11-26 15:39:19 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

and vue控件同时被 3 个专栏收录

4 篇文章

订阅专栏

antd vue table

3 篇文章

订阅专栏

antd table 选择

1 篇文章

订阅专栏

本文详细介绍了在AntDesignVue框架下如何配置table控件实现单选、默认选中以及获取选中项的功能，包括rowSelection属性的设置和onChange方法的使用。

今天就讲讲Ant Design Vue下的控件 ---- table表格（选择和操作）

结合项目中的需求，看看如何配置table控件，需求：

（1）根据列表中的选项，单选；

（2）根据已有的选中项，默认已选；

（3）得到被选中项的信息。

核心：rowSelection.selectedRowKeys

模板中代码如下：

<template>
  <div style="margin: 0; padding: 0">
    <a-row>
      <a-col :span="24">
        <a-table
          class="ant-table-striped"
          size="small"
          bordered
          rowKey="input_item_value"
          :data-source="brentDatas"
          :columns="brentCols"
          :pagination="false"
          :loading="loading"
          :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
          :rowSelection="{
            type: 'radio',
            onChange: rowSelectedChange,
            selectedRowKeys: selectedInputItemValue,
          }">
        </a-table> 
      </a-col>
    </a-row>
  </div>
</template>

1. 设置第一列单选按钮

绑定rowSelection属性，设置type为radio;并设置rowKey为brentDatas中的主键列名

2. 设置默认选中项

绑定rowSelection属性，设置selectedRowKeys。代码如下：

const selectedInputItemValue = ref([]); //用来设置默认值，声明

selectedInputItemValue.value.push(res[0].inputItemValue);//res为选中项的结果集，将结果集第一行的inputItemValue为默认值。

3. 获取选中项，调用onChange方法

//单选事件
  function rowSelectedChange(selectedRowKeys: string[], selectRows: []) {
    selectedBrent.value = selectedRowKeys[0];
    //console.log('selectedBrent', selectedBrent.value);
    selectedInputItemValue.value = selectedRowKeys;
  }

selectedInputItemValue为获取到的选中项集合。