el-
table是一个基于
element-ui的表格组件。编辑
单元格的操作需要使用到
el-
table的slot和scoped-slot属性。
首先，在
el-
table中定义一个slot，用来渲染需要编辑的
单元格。例如，可以在表格的第二列
中添加一个可编辑的
单元格：
```html
<
el-
table-column lab
el="姓名">
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
</template>
</
el-
table-column>
<
el-
table-column lab
el="年龄">
<template slot-scope="scope">
<span class="edi
table-c
ell">{{ scope.row.age }}</span>
</template>
</
el-
table-column>
```
在第二列
中，我们使用了一个class为edi
table-c
ell的span元素来渲染需要编辑的
单元格。
接下来，我们需要定义一个scoped-slot，用来渲染编辑
单元格时的弹出框。例如，我们可以使用
el-dialog组件来实现弹出框的效果：
```html
<
el-
table-column lab
el="年龄">
<template slot-scope="scope">
<span class="edi
table-c
ell" @click="editC
ell(scope.row, 'age')">{{ scope.row.age }}</span>
<
el-dialog :visible.sync="dialogVisible">
<
el-input v-mod
el="editValue"></
el-input>
<div slot="footer">
<
el-button @click="dialogVisible = false">取消</
el-button>
<
el-button type="primary" @click="saveEdit()">保存</
el-button>
</div>
</
el-dialog>
</template>
</
el-
table-column>
```
在这里，我们为edi
table-c
ell元素添加了一个@click事件，当
单元格被点击时，会触发editC
ell方法。该方法会设置dialogVisible为true，显示
el-dialog组件。
el-dialog
中包含一个
el-input用来输入编辑后的值，以及一个保存和取消按钮。
在methods
中定义editC
ell、saveEdit方法：
```js
methods: {
editC
ell(row, prop) {
this.editRow = row
this.editProp = prop
this.editValue = row[prop]
this.dialogVisible = true
},
saveEdit() {
this.dialogVisible = false
this.editRow[this.editProp] = this.editValue
}
}
```
在editC
ell方法
中，我们记录当前需要编辑的行和属性，以及设置编辑框的值和可见性。在saveEdit方法
中，我们将编辑后的值保存到数据源
中，并将编辑框隐藏。
最后，为了让用户知道哪些
单元格可以编辑，我们可以使用CSS样式来为编辑
单元格添加一个边框或者背景色：
```css
.edi
table-c
ell {
cursor: pointer;
border: 1px dashed #ccc;
padding: 2px 6px;
display: inline-block;
}
```
3730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
