element表格可编辑
时间: 2023-11-29 09:47:00 浏览: 86
以下是使用ElementUI实现表格可编辑的示例代码:
```html
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄" editable></el-table-column>
<el-table-column prop="address" label="地址" editable></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, address: '北京市' },
{ name: '李四', age: 22, address: '上海市' },
{ name: '王五', age: 30, address: '广州市' },
{ name: '赵六', age: 26, address: '深圳市' }
]
}
}
}
</script>
```
在上述代码中,我们使用了ElementUI的`el-table`和`el-table-column`组件来实现表格的展示和编辑。其中,我们在需要编辑的列上添加了`editable`属性,表示该列可编辑。用户可以直接在表格中双击需要编辑的单元格,进行编辑操作。
阅读全文