【VUE】表格实现自定义多选 (Ant Design Vue)

最新推荐文章于 2025-08-03 12:19:53 发布

半仙儿~

最新推荐文章于 2025-08-03 12:19:53 发布

阅读量1.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42941628/article/details/132028612

vue 专栏收录该内容

4 篇文章

订阅专栏

这是一个Vue组件示例，展示了一个包含全选功能的表格。表格数据绑定在`orderListData`上，通过`checked`属性和`change`事件处理选中状态。`changeCheckAll`方法用于切换全选状态，`changeCheck`方法处理单行选择。

<template>
  <div class="orderManage tablePage flex_column">
    <a-table ref="tableBox_"
           :columns="columns"
           :data-source="orderListData"
            rowKey="id"
    >
      <template #customTitle>
         <span style="position: absolute;left: 10px">
           <a-checkbox v-model:checked="checkAll" @change="changeCheckAll">全选</a-checkbox>
         </span> 
          宝贝
      </template>
      <template #nameBox="rowData">
        <div class="">
            <a-checkbox :checked="selectedRowKeys.includes(rowData.text.id)" @change="changeCheck(rowData)"></a-checkbox>
            <span>复制订单号</span>
        </div>
      </template>
    </a-table>
  </div>
</template>
<script>
import { defineComponent,ref,reactive } from 'vue';
  export default defineComponent({
      name:"listTable",
      data(){
        return{
          checkAll:false, //全选状态
          selectedRowKeys: [], //选中的key
          selectedRows: [], //选中的数据
          columns:[
              {title:'单价',align:'center',width:130,customCell: (_, index) => ({colSpan: 0})},
              {title:'数量',align:'center',width:80,customCell: (_, index) => ({colSpan: 0})},
          ],
          orderListData:[{id:111,name:"网卡"},{id:222,name:"深度"},{id:333,name:"打扫"}],
        }   
  methods: {
    changeCheckAll(){
        if (this.selectedRowKeys.length === this.orderListData.length) {
          this.selectedRowKeys = [] // 判断是否已全部选中，是则清空已选列表
          this.selectedRows = [];
          this.checkAll = false;
        } else {
          this.orderListData.forEach((item) => {
            if (!this.selectedRowKeys.includes(item.id)) {
              this.selectedRowKeys.push(item.id) // 否则将未选中的全部加入已选列表中
              this.selectedRows.push(item);
            }
          })
          this.checkAll = true;
        }
    },
    changeCheck(row){
      if (!this.selectedRowKeys.includes(row.text.id)) {
        this.selectedRowKeys.push(row.text.id);
        this.selectedRows.push(row.text);
      } else {
        let index = this.selectedRowKeys.indexOf(row.text.id);
        this.selectedRowKeys.splice(index, 1);
        this.selectedRows.splice(index, 1);
      }
      console.log(" this.selectedRowKeys", this.selectedRowKeys)
      console.log(" this.selectedRows", this.selectedRows)
    },
  }
});
</script>