说明
在对表格数据进行操作时，如果数据项比较少，可通过自定义实现直接在表格中编辑。
界面展示
实现要点
使用slot来自定义单元格，实现输入、选择等操作使用slot来自定义表头实现Add操作按钮在表头使用v-if与v-else实现编辑状态与查看状态按钮的切换代码
{{ scope.row.name }}{{ scope.row.age }}{{ scope.row.sex }}AddSaveEditDeleteimport { InfoFilled } from '@element-plus/icons-vue'import { reactive, ref } from 'vue';interface iUser {name: string;age: number;sex: string;}let userData: iUser[] = reactive([{name: 'nico',age: 18,sex: 'female'}]);let activeIndex = ref(-1);// 新增行const handleAdd = function () {let item = {name: '',age: 0,sex: ''};userData.push(item);activeIndex.value = userData.length - 1;};// 编辑行const handleEdit = (index: number) => {activeIndex.value = index;};// 保存行const handleSave = () => {activeIndex.value = -1;};// 删除行const handleDelete = function (index: number) {userData.splice(index, 1);};