vue3+element-plus如何做一个动态增删同时具有校验功能的table表格
作者：互联网
项目中有个比较麻烦的需求：
一个表格：
-
能手动向表格第一行增加一行
-
每一行的每一列在点击某一格时要能输入
-
每个表单控件需要有校验功能
-
支持多选
-
可以删除所选行
-
保存后需要前端做一个仅前端部分的查询
原型如下：
上面这些要求看起来就很麻烦。但是更麻烦的是，这个原型还是修改过的，原来的原型已经实现功能了，刚写完，第二天领导又把原型改掉了。
1.先说大致实现思路：
(1) 如何实现每个每个input输入框都带有校验功能？
答：每个输入框给一个<el-form>，就是每个表单都只有一个表单，每个表单的只有一个<el-form-item>，有着对应的校验规则。在点击保存时获取到当前所有的refs，通过调用form表单的validate()方法，实现每个表单都有校验功能。
(2) 如何向当前表格第一行加一个可编辑的行？
答：先定义一个字段模板，每次新增，用unshift方法添加到当前表格数据列表的第一行。
(3)如何实现点击某一格可以编辑？
答：每一个<td>格子里都有两个元素：一个是表单控件，一个是用来展示的文本。同时给每个表单绑定的字段在每一行的数据中加一个对应的'${key}_isEditing'字段，类型为Boolean，点击时修改这个字段为true或false，同时使用v-if控制当前td的表单控件的显示与隐藏。
主要比较难的就是上面三个功能的实现，其他的增删改都是围绕着<el-table>的当前选中行进行操作的。
具体组件源码如下：
<template>
<div class="attr-table">
<el-row :gutter="20">
<el-col :span="10">
<el-date-picker style="width: 100%" @change="timeChange" v-model="timeRange" type="datetimerange" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" />
</el-col>
<el-col :span="6">
<el-input @clear="searchClearFn" clearable v-model="dataForm.attr" placeholder="属性编码" />
</el-col>
<el-col :span="4">
<el-button type="primary" @click="getData">查询</el-button>
</el-col>
</el-row>
<br />
<el-row :gutter="20">
<el-col :span="24" style="text-align: right">
<el-button @click="addAttr()" type="primary">新增</el-button>
<el-button @click="save()" type="warning">保存</el-button>
<el-button @click="deleteRow" type="danger">删除</el-button>
</el-col>
</el-row>
<br />
<div class="main-table">
<el-table ref="attrTableRef" @selection-change="handleSelectionChange" v-loading="loading" :data="tableData" style="width: 100%">
<el-table-column type="selection" width="55" />
<el-table-column prop="ts" label="时间">
<template v-slot="scope">
<el-form :ref="`formRef${scope.$index}ts`" v-if="scope.row.ts_editing" :model="scope.row">
<el-form-item prop="ts" :rules="{ required: true, message: '请输入时间', trigger: 'blur' }">
<el-date-picker format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" v-model="scope.row.ts" type="datetime" placeholder="时间"> </el-date-picker>
</el-form-item>
</el-form>
<span v-else @click="itemClick(scope)" class="fill-p">{{ scope.row.ts }}</span>
</template>
</el-table-column>
<el-table-column prop="key" label="属性编码">
<template v-slot="scope">
<el-form :ref="`formRef${scope.$index}key`" v-if="scope.row.key_editing" :model="scope.row">
<el-form-item prop="key" :rules="{ required: true, message: '请输入属性编码', trigger: 'blur' }">
<el-input type="text" size="small" v-model="scope.row.key" placeholder="属性编码" />
</el-form-item>
</el-form>
<span @click="itemClick(scope)" class="fill-p" v-else>{{ scope.row.key }}</span>
</template>
</el-table-column>
<el-table-column prop="value" label="属性值">
<template v-slot="scope">
<el-form :ref="`formRef${scope.$index}value`" v-if="scope.row.value_editing" :model="scope.row">
<el-form-item prop="value" :rules="{ required: true, message: '请输入属性值', trigger: 'blur' }">
<el-input type="text" size="small" v-model="scope.row.value" placeholder="属性值" />
</el-form-item>
</el-form>
<span class="fill-p" @click="itemClick(scope)" v-else>{{ scope.row.value }}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script setup>
import { ref, getCurrentInstance, defineProps, onMounted, defineEmits, defineExpose, watch } from "vue";
import { ElMessage } from "element-plus";
import { toRefs } from "@vueuse/core";
import baseService from "@/service/baseService";
import { formatDate } from "../../tool.js";
const props = defineProps(["loading", "hasSearch", "defaultData", "thingCode"]);
const emits = defineEmits(["save"]);
const { loading, hasSearch, defaultData, thingCode } = toRefs(props);
const tableData = ref([]);
const initData = ref([]);
const selectedRow = ref([]);
const attrTableRef = ref();
// 查询之前的tableData
const copyTableData = ref([]);
// 用于判断修改之后是否保存
const changeHasSave = ref(true);
const dataForm = ref({
beginTime: "",
endTime: "",
attr: ""
});
const timeRange = ref([]);
watch(defaultData, (v) => {
tableData.value = v;
});
onMounted(() => {
const data = [
// {
// code: "1",
// startTime: "2022-02-22 06:23:56",
// latestTime: "",
// frequency: "2"
// }
];
initData.value = data;
data.forEach((d) => {
for (const k in d) {
d[`${k}_editing`] = false;
}
});
tableData.value = data;
});
// 获取属性编码
function getAttr() {
if (!changeHasSave.value) {
ElMessage({
type: "warning",
message: "请先保存数据"
});
return;
}
baseService.get("/cache/cachethingattr/getCacheThingAttrList", { thingCode: thingCode.value, thingAttr: dataForm.value.attr }).then((res) => {
const data = res?.data || data;
tableData.value = data.map((e) => {
return {
id: e.id,
ts: e.thingAttr,
key: e.firstTs,
value: e.lastTs
};
});
});
}
const context = getCurrentInstance();
const tableKey = ref(0);
const firstLineForm = {
isUpdate: true,
isNewLine: true,
ts: "",
ts_editing: true,
key: "",
key_editing: true,
value: "",
value_editing: true
};
/* 用来修改当前表格的某一行的某个数据 */
function upDateTable(index, key, value, newLine) {
const newTableData = JSON.parse(JSON.stringify(tableData.value));
if (newLine) {
newTableData.unshift(newLine);
} else {
newTableData[index][key] = value;
}
tableData.value = newTableData.map((e, index) => {
// 给每行加上一个index
return {
...e,
index
};
});
}
function getData() {
// 查询之前先校验
if (!tableValidate() || !thingCode.value) return;
if (!changeHasSave.value) {
// 没有点击保存，或者没有新增数据
ElMessage({
type: "warning",
message: "当前有没有保存的数据，请先保存"
});
return;
}
baseService.get("/thing/thing/getSequentialInformationByCondition", { ...dataForm.value, thingCode: thingCode.value }).then((res) => {
const data = res?.data || [];
console.log("查询的数据：", data);
tableData.value = data.map((e) => {
return {
ts: formatDate(+e.ts),
key: e.key || "",
value: e.value || ""
};
});
});
}
function searchClearFn() {
if (thingCode.value) {
getAttr();
return;
}
tableData.value = copyTableData.value;
}
function timeChange(v) {
dataForm.value.beginTime = formatDate(v[0]);
dataForm.value.endTime = formatDate(v[1]);
}
function addAttr() {
upDateTable("", "", "", { ...firstLineForm });
changeHasSave.value = false;
}
function save(row) {
/* 物管理的这个保存和缓存设置页面的保存是两个后端写的
* 这里的基础信息的保存和时许属性的保存是两个分开的接口，所以这里直接用组件保存就行了
* 缓存设置页面的基础信息的保存和属性的保存是公用一个接口
* */
if (!tableValidate()) return;
if (changeHasSave.value) {
ElMessage({
type: "warning",
message: "没有需要保存的数据"
});
return;
}
// 都通过了验证，取消编辑状态
tableData.value.forEach((e) => {
e.ts_editing = false;
e.key_editing = false;
e.value_editing = false;
});
// 保存备份用于查询
// copyTableData.value = JSON.parse(JSON.stringify(tableData.value));
// 提交
const tsKvReqParamList = tableData.value.map((e) => {
return {
ts: new Date(e.ts).getTime(),
values: {
[e.key]: e.value
}
};
});
baseService.post("/thing/thing/saveSequentialInformationToTb", { thingCode: thingCode.value, tsKvReqParamList }).then((res) => {
if (res.code === 0) {
ElMessage({
type: "success",
message: "保存成功"
});
getData();
}
});
// 已经点击保存
changeHasSave.value = true;
}
function itemClick(row) {
const { $index, column } = row;
/* 修改时已有数据的时间和属性编码不能修改 */
if (!column.isNewLine && (column.property === "ts" || column.property === "key")) return;
tableData.value[$index][`${column.property}_editing`] = true;
if (changeHasSave.value) changeHasSave.value = false;
}
function deleteRow() {
if (selectedRow.value.length <= 0) {
ElMessage({
type: "warning",
message: "请选择需要删除的属性"
});
return;
}
// const hasEditing = selectedRow.value.some((e) => {
// return e.key_editing || e.ts_editing || e.value_editing;
// });
// console.log("当前选择有正在编辑", hasEditing);
// if(hasEditing){
// ElMessage({
// type: "warning",
// message: "请先保存正在修改的数据"
// });
// return;
// }
// 先删除新增的行。数据库有的暂时不动
const newLineList = selectedRow.value.filter((e) => {
return e.isNewLine;
});
console.log("是新增：", newLineList);
const indexs = newLineList.map((e) => e.index).sort((a, b) => b - a); // 把索引从大到小排列
const newTableData = JSON.parse(JSON.stringify(tableData.value));
// 从tableData中删除选择的数据
indexs.forEach((e) => {
newTableData.splice(e, 1);
});
tableData.value = newTableData;
}
function handleSelectionChange(sel) {
selectedRow.value = sel;
}
// 表格的校验方法
function tableValidate() {
const { refs } = context;
let allPassValidate = true;
// 这里是调用所有行的validate()方法
for (let ref in refs) {
if (ref === "attrTableRef") continue;
refs[ref]?.validate((v) => {
if (!v) {
allPassValidate = false;
}
});
}
return allPassValidate;
}
// 当前组件抛出给父组件的用于清空的方法
function clear() {
tableData.value = [];
}
// 用于判断是否保存或是否新增了属性
function hasSaved() {
// 判断之前先校验
if (!tableValidate()) return false;
return copyTableData.value.length > 0;
}
defineExpose({ clear, hasSaved });
</script>
<style lang="less">
.fill-p {
display: inline-block;
width: 100%;
height: 24px;
}
</style>
标签：return,value,element,plus,key,vue3,const,ref,tableData 来源： https://www.cnblogs.com/codexlx/p/16392092.html