### 关于 `
el-table` 实现可
编辑联动功能的方法
为了实现带有可
编辑和联动特性的 `
el-table` 功能，主要依赖 Vue.js 的双向
数据绑定特性以及
Element UI 提供的相关 API 来完成。下面介绍一种具体方案来满足这一需求。
####
数据准备
首先定义好
表格所需的
数据模型，在此案例中假设有一个商品列表，其中每一行代表一件商品的信息，并且这些信息是可以被修改的。同时存在一个关联的商品分类树形结构用于展示类别之间的层次关系[^1]。
```javascript
data() {
return {
tableData: [
{ id: 1, name: "苹果", category_id: 2 },
{ id: 2, name: "香蕉", category_id: 3 }
],
treeData: [
{
lab
el: '水果',
children: [{lab
el: '苹果', value: 2}, {lab
el: '橙子', value: 4}]
},
{
lab
el: '蔬菜',
children: [{lab
el: '白菜', value: 5}]
}
]
};
}
```
####
表格配置与渲染
创建一个具有
编辑能力的
表格组件，允许用户直接在单元格内输入新值；当某个特定字段发生变化时触发相应的业务逻辑处理函数更新其他相关联的部分。
```html
<template>
<div>
<!
-- 商品管理
-->
<
el-table :data="
tableData">
<
el-table-column prop="name" lab
el="名称"></
el-table-column>
<
el-table-column prop="category_name" lab
el="所属分类">
<template slot
-scope="{ row }">
{{ getCategoryLab
el(row.category_id) }}
</template>
</
el-table-column>
<
el-table-column fixed="right" width="80px" align="center">
<template slot="header">操作</template>
<template slot
-scope="scope">
<
el-button size="mini" @click="editRow(scope.$index)">
编辑</
el-button>
</template>
</
el-table-column>
</
el-table>
<!
-- 编辑对话框
-->
<
el-dialog title="
编辑商品" v
-mod
el="
dialogVisible" width="30%">
<
el-form ref="formRef" :mod
el="currentEditItem">
<
el-form
-item lab
el="名称">
<
el-input v
-mod
el="currentEditItem.name"/>
</
el-form
-item>
<
el-form
-item lab
el="选择分类">
<
el-cascader
placeholder="试试搜索：手机"
:options="treeData"
filterable
clearable
change
-on
-select
v
-mod
el="
selectedCategoryIds"
@change="handleChangeCateogry"
/>
</
el-form
-item>
</
el-form>
<span slot="footer" class="
dialog-footer">
<
el-button @click="close
Dialog()">取 消</
el-button>
<
el-button type="primary" @click="saveChanges()">确 定</
el-button>
</span>
</
el-dialog>
</div>
</template>
```
#### JavaScript 部分
编写必要的方法来进行表单验证、保存更改后的记录到
数据库（此处省略实际请求部分），并确保每次成功提交之后重新加载最新的
数据刷新视图[^2]。
```javascript
methods: {
editRow(index){
this.currentEditIndex = index;
let item = JSON.parse(JSON.stringify(this.
tableData[index]));
Object.assign(this.currentEditItem, item);
this.
dialogVisible = true;
// 初始化已选
中的分类 ID 数组
this.
selectedCategoryIds = [];
const cateIdPath = this.findCategoryIdPath(item.category_id);
if(cateIdPath.length>0)this.
selectedCategoryIds.push(...cateIdPath);
},
handleChangeCateogry(valueArr){
console.log('选择了新的分类:',valueArr[valueArr.length
-1]);
this.currentEditItem.category_id=valueArr[valueArr.length
-1];
},
saveChanges(){
// 假设这里进行了AJAX调用来保存变更...
// 更新本地状态机
this.$set(this.
tableData,this.currentEditIndex,Object.assign({},this.currentEditItem));
this.close
Dialog();
},
close
Dialog(){
this.
dialogVisible=false;
this.resetFormFi
elds();
}
resetFormFi
elds(){
this.currentEditItem={};
this.
selectedCategoryIds=[];
}
findCategoryIdPath(targetValue){
function dfs(node,path=[]){
path=[...path,node.value||node.id];
if(path.includes(targetValue))return path;
if(!Array.isArray(node.children)||!node.children.length)return null;
for(let child of node.children){
const result=dfs(child,[...path]);
if(result!==null)return result;
}
return null;
};
for(const root of this.treeData){
const res=dfs(root);
if(res!=null)return res.filter(id=>id===targetValue).length?res:[];
}
return [];
},
getCategoryLab
el(categoryId){
var lab
els=['未知'];
function traverse(nodes,id){
nodes.forEach((item)=>{
if(item.value==id || item.id==id){
lab
els.pop();
lab
els.push(item.lab
el);
return ;
}
Array.isArray(item.children)&&traverse(item.children,id);
});
}
traverse(this.treeData,categoryId);
return lab
els.join('/');
}
},
computed:{
dialogVisible:{
get(){return !!Object.keys(this.currentEditItem).length;},
set(val){if(!val)this.resetFormFi
elds();}
}
}
```
上述代码片段展示了如何利用 Vue
和 Element UI 创建一个具备基本 CRUD 功能的应用程序界面，特别是针对 `
el-table` 中某一行进行
编辑的同时还能与其他控件形成良好的互动效果。通过这种方式不仅可以提高用户体验还可以简化开发流程[^3]。
本文解决了一个在使用Element UI组件库开发后台管理系统时遇到的问题：编辑表格数据时，弹出对话框显示数据但无法编辑。问题在于数据传递时只复制了对象引用，导致编辑时数据未真正更新。通过正确地深拷贝数据，问题得以解决。
扫一扫
4331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
