ElementUI table+dialog实现一个简单的可编辑的表格

table组件如何实现可编辑呢？

我的需求是把table组件那样的表格，实现它点击可以弹出一个框，然后在这个框里面输入你的东西，然后将他回显回去，当然，输入的有可能是时间啥的。

为什么要弹出弹层不在框上直接编辑呢？因为框太小了，用户可能看不见输入的是啥。

我们可以利用element组件的插槽，获取数值，然后回显到表格里。

HTML部分

我用了一个弹层来写这个功能，如果测试效果，可以直接在主页面引入 ，将弹层的控制开关改为true。

JS

1.渲染数据集合

自定义的表头，HTML结构中通过v-for 循环表头列表，进行label的取值来构建最基础的表格

// 表格之中的数据
const testDatas: any = ref([]);

// 表头列表
const columnList: any = ref([
	{ prop: "projectName", label: "测试1" },
	{ prop: "time", label: "时间段" },
	{ prop: "projectContentSummary", label: "测试2" }
]);

2.handleEdit函数

这个函数主要是用来控制弹层的弹出，通过行的标签名字判断需要什么输入的值。根据whatSava的值来判断你点击的是哪个表格，这个参数在HTML结构写死，cellRow和cellCol就是在渲染的时候带入的行的值和列的值。可以获得标签名字或者prop字段用来做判断。当然，这些名字也可以用来设置弹出弹框的弹框名字。

然后判断prop的值来看是不是需要输入 或者是 时间段格式的，让各自的开关变为true或者false

并且根据cellRow[cellCol.prop]这个值来对弹出来的框进行赋值，也就是回显。

const addinput = ref("");
const addTitle = ref("");
const addCode = ref();
const addProp = ref();
const isTime = ref(false);
const savaWhat = ref();
const isNum = ref(false);
const handleEdit = (whatSava: any, cellRow: any, cellCol: any) => {
	if (whatSava == "0") {
		savaWhat.value = 0;
	}
	if (cellCol.prop == "ceshi1" || cellCol.prop == "ceshi2") {
		isTime.value = false;
		if (cellCol.prop == "ceshi2") {
			isNum.value = true;
		} else {
			isNum.value = false;
		}
		addTitle.value = cellCol.label;
		addProp.value = cellCol.prop;
		addCode.value = cellRow.index;
		addinput.value = cellRow[cellCol.prop];
		addDialog.value = true;
	} else {
		isTime.value = true;
		addTitle.value = cellCol.label;
		addProp.value = cellCol.prop;
		addCode.value = cellRow.index;
		addinput.value = cellRow[cellCol.prop];
		addDialog.value = true;
	}
};

3.保存弹框函数

这个函数就是弹出层的保存函数，先找到你点击的是哪个框，然后把弹框里面输入的东西赋值给他，如果是数字的话，就用正则限制一下，不让他输入数字以外的东西。最后要清空一下，防止下次回显。

const sava = () => {
	let idx = testDatas.value.findIndex((p: any) => p.index == addCode.value);
	if (addProp.value == "ceshi2") {
		if (!/^[0-9]*$/.test(addinput.value)) {
			ElMessage.warning("请输入数字");
			return;
		}
		testDatas.value[idx][addProp.value] = addinput.value;
	} else {
		testDatas.value[idx][addProp.value] = addinput.value;
	}
	addinput.value = "";
	addDialog.value = false;
};

4.清洗时间格式函数

因为我们日期时间选择器，得到的是一个数组，所以我们回显的时候，应该拿数组的第一项和第二项，然后拼接起来，得到我们回显的正确格式。

//时间格式清洗
const changeTime = (data: any) => {
	if (!data) {
		return "";
	} else {
		let data1 = data[0] + "~" + data[1];
		return data1;
	}
};

5.添加函数

只需要我们知道添加的是哪个表格的，单表格就可以忽略whatAdd这个参数。

逻辑就是先判断他是不是为空，为空的话给他单纯的加一行，不为空的话，得到数组的长度，给他加一个index，我在写的过程中，发现我们没有办法获得一个标识，所以我写了一个index来当作唯一标识，当然，这个在获取后端接口的时候，需要你获取后端给你数组的长度，然后再依次相加就不会导致错误的出现。

// 添加一行
const addRow = (whatAdd: number) => {
	if (whatAdd == 0) {
		let obj: any = {};
		if (testDatas.value.length == 0) {
			obj.index = "0";
			columnList.value.forEach((p: any) => {
				obj[p.prop] = "";
			});
			testDatas.value[0] = obj;
		} else {
			const weiyi = testDatas.value[testDatas.value.length - 1].index;
			columnList.value.forEach((p: any) => {
				obj[p.prop] = "";
			});
			obj.index = String(Number(weiyi) + 1);
			testDatas.value[testDatas.value.length] = obj;
		}
	}
};

6.删除函数

因为删除标签在table表格之中，所以我们可以用scope准确的获得是哪一行，然后用whatDel判断你删除的是哪个表格。

//删除
const delRow = (scope: any, whatDel: number) => {
	const arrIndex = scope.$index; //唯一标识
	//将testDatas中的第arrIndex项数据删除
	if (whatDel == 0) {
		testDatas.value.splice(arrIndex, 1);
	}
};

CSS

 全部代码