一 多条数据勾选合并一条新数据方法讲解
1.首先这个模块的功能结合了antdVue ui 库的Table组件
Ant Design Vue介绍:
是一个基于 Vue.js 的 UI 组件库,它是 Ant Design 的 Vue 实现版本。Ant Design Vue 提供了一套丰富的组件,用于构建现代化的 Web 应用程序。Ant Design 是一个由阿里巴巴设计团队开发的设计语言和前端框架,以提供一致性、可重用性和友好性为目标。
以下是 Ant Design Vue 的一些主要特点和组成部分:
-
丰富的组件: Ant Design Vue 提供了大量的高质量组件,涵盖了按钮、表单、导航、布局、通知、对话框、图表等方方面面,使开发者能够轻松构建各种类型的用户界面。
-
Vue.js 生态整合: Ant Design Vue 是专为 Vue.js 框架设计的,充分利用了 Vue.js 的特性,使其更易于在 Vue 项目中集成和使用。
-
响应式设计: 组件库考虑了不同设备上的响应式设计,以确保用户在各种屏幕尺寸上都能有良好的体验。
配置步骤
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; },