表格内每列数据勾选一个，合并一条新数据方法（vue2+antdVue）

一 多条数据勾选合并一条新数据方法讲解

1.首先这个模块的功能结合了antdVue ui 库的Table组件

Ant Design Vue介绍：

是一个基于 Vue.js 的 UI 组件库，它是 Ant Design 的 Vue 实现版本。Ant Design Vue 提供了一套丰富的组件，用于构建现代化的 Web 应用程序。Ant Design 是一个由阿里巴巴设计团队开发的设计语言和前端框架，以提供一致性、可重用性和友好性为目标。

以下是 Ant Design Vue 的一些主要特点和组成部分：

1. 丰富的组件： Ant Design Vue 提供了大量的高质量组件，涵盖了按钮、表单、导航、布局、通知、对话框、图表等方方面面，使开发者能够轻松构建各种类型的用户界面。

2. Vue.js 生态整合： Ant Design Vue 是专为 Vue.js 框架设计的，充分利用了 Vue.js 的特性，使其更易于在 Vue 项目中集成和使用。

3. 响应式设计： 组件库考虑了不同设备上的响应式设计，以确保用户在各种屏幕尺寸上都能有良好的体验。

配置步骤

1.首先使用 Ant Design Vue 时，你可以通过 npm 或 yarn 安装相应的包

$ npm install ant-design-vue --save

$ yarn add ant-design-vue

vue2配置antdVue（安装1.7.8版本）

npm i --save ant-design-vue@1.7.8

2.在vue项目中main.js引入如下配置

import Antd from 'ant-design-vue'
import App from './App.vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Vant)//将antdvue集成进vue中

2.运用antdVue Table表格组件来实现

1.首先先定义表格内：

表头数组格式（scopedSlots定义的插槽名要和data数据里的对象名一致）

let columns=[
      {
       title: "姓名",
        scopedSlots: {
          customRender: "user", //通过table表格插槽在表格内定义勾选框方法，需要和data数据的名字一样
        },
        align: "center",
      },
        {
        title: "年龄",
        scopedSlots: {
          customRender: "age",
        },
        align: "center",
      },
      {
        title: "手机号",
        scopedSlots: {
          customRender: "phone",
        },
        align: "center",
      },
      {
        title: "地址",
        scopedSlots: {
          customRender: "address",
        },
        align: "center",
      },
]

2.表格内一行的数据（后端返回的，这里是我模拟的）

踩坑点：在数据格式上需要跟后端进行沟通，返回需要的数据格式，在数据格式这块前期因为没做好沟通耗费的时间较长（之后在做类似的就可以通用这个数据格式）

  let data =[ {
              id: 1,
              user: { //此处的user需要跟表头数组里面的 customRender名一样
                value: "张三",
                ischecked: false,
              },
              age: {
                value: "18",
                ischecked: false,
              },
              phone: {
                value: "10010",
                ischecked: false,
              },
              address: {
                value: "甘肃兰州",
                ischecked: false,
              },
            }
 ]

3.在vue的生命周期里面进行数据处理（主要为了配合简化后的方法）

  //   vue的生命周期（通俗来讲就是页面生成之前来进行一些方法）
      created() {
        let keyList = [];
        this.data.map((item) => {
          //通过这个方法把数组对象里面的key键全部取出存入数组（目的为了在表格中来循环出勾选方法，否则每一条数据都要单独写一个方法）
          for (let key in item) {
            keyList.push(key);
          }
        });
        this.list = [...new Set(keyList)]; //ES6去重
        console.log(this.list, "data数据里面的对象key键");
      },

4.接下来就该在Table标签上进行配置

踩坑点：之前在项目中是有多少个表头，表格组件内就要写多少个方法，现在优化过后（主要通过步骤3来优化），一个方法就可以实现

<a-table 
:columns="columns" //表格的表头
:data-source="data"//表格一行的内容
 row-key="id"//表格的唯一标识
 :pagination="false"//禁用自带分页
>
  //此处遍历存储的所有对象的key 
  //这里的 :slot="item" 插槽必须跟columns表头数组里面定义的插槽名字对应上
  //list是处理过的数据（存储的是data数据的所有对象的key键）
  //tem 这个item就是循环出当前得key 
  //record antdVueUI 框架表格组件得方法  它就是表格中一行得数据 
  //record[item].ischecked 用循环出来的key去找到当前对应数据得选中状态
  //a-radio-group这个是antdVue 里面单选框组件 
  //record[item].ischecked 用数组中存储的key去找到当前对应数据得选中状态
  //这里定义一个点击方法，传入当前index索引和当前得key
  //handleDoubleClick（index, item）这里是双击方法，同样传入当前index索引和当前得key键
   <span v-for="item in list" :slot="item" slot-scope="text, record, index">
         <a-radio-group>
         <a-radio
            :value="record[item].ischecked" 
            @click="changeStatus(index, item)"
            @dblclick="handleDoubleClick(index, item)" 
            />
            <div>{{record[item].value}}</div>
            <div>{{record[item].ischecked}}</div>
          </a-radio-group>
        </span>
 </a-table>

5.点击方法（单击选中方法）

传入参数index索引为当前索引和当前得key键
changeStatus(index, name) {
          //遍历data里面得对象
          this.data.forEach((item) => {
            //遍历数据对象
            for (const key in item) {
              //找到当前点击的这一列
              if (key == name) {
                item[key].ischecked = false; //把这一列之前的选中状态全部变为false
              }
            }
            this.data[index][name].ischecked = true; //在把当前点击的变为true
            this.$set(this.selectedData, name, this.data[index][name].value); //将选中的数据通过$set方法实时响应在页面上
          });
          console.log(this.selectedData, "最终勾选结果");
        },

6.双击取消勾选的方法

    //双击取消方法
        handleDoubleClick(index, item) {
          this.data[index][item].ischecked = false;
 },