vue3可编辑的el-table表格
时间: 2023-10-14 14:12:48 浏览: 120
vue可编辑表格
在Vue3中,可以使用`<el-table>`组件来实现可编辑的表格。具体步骤如下:
1. 安装`element-plus`组件库:在终端中运行以下命令来安装:
```
npm install element-plus --save
```
2. 在Vue3的入口文件中引入`element-plus`组件库:
```js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
```
3. 在需要使用可编辑表格的组件中,引入`<el-table>`组件,并设置`editable`属性为`true`:
```html
<template>
<el-table :data="tableData" :editable="true">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, address: '北京市' },
{ name: '李四', age: 20, address: '上海市' },
{ name: '王五', age: 22, address: '广州市' }
]
}
}
}
</script>
```
上面的代码中,`tableData`数组中的数据是表格的数据源,`el-table-column`组件中的`prop`属性对应了`tableData`数组中的数据键名,`label`属性则是表格列的标题。
当`editable`属性为`true`时,表格的单元格可以进行编辑,用户可以直接在单元格中输入或修改数据,修改后的数据会自动同步到`tableData`数组中。
阅读全文