首先，我们
需要安装 `
vue` 和 `
element-ui`。
```bash
npm install
vue element-ui --save
```
然后，我们在 `main.js` 文件中引入并使用它们：
```javascript
import
Vue from '
vue'
import
ElementUI from '
element-ui'
import '
element-ui/lib/theme-chalk/index.css'
import App from './App.
vue'
Vue.use(
ElementUI)
new
Vue({
el: '#app',
render: h => h(App)
})
```
接下来，我们在 `App.
vue` 文件中实现表格的增删改查功能。
```
vue
<template>
<div>
<el-input v-model="searchText" placeholder="请输入搜索关键字"></el-input>
<el-button type="primary" @click="handleAdd">添加</el-button>
<el-table :data="tableData" style="width: 100%">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button type="text" @click="handleDelete(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="dialogVisible" title="添加/编辑">
<el-
form :model="
form" :rules="rules" ref="
form">
<el-
form-item label="姓名" prop="name">
<el-input v-model="
form.name"></el-input>
</el-
form-item>
<el-
form-item label="年龄" prop="age">
<el-input v-model.number="
form.age"></el-input>
</el-
form-item>
</el-
form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 },
],
searchText: '',
dialogVisible: false,
form: {
name: '',
age: 0,
},
rules: {
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
},
editIndex: -1,
}
},
methods: {
handleAdd() {
this.
form.name = ''
this.
form.age = 0
this.dialogVisible = true
this.editIndex = -1
},
handleEdit(index, row) {
this.
form.name = row.name
this.
form.age = row.age
this.dialogVisible = true
this.editIndex = index
},
handleSubmit() {
this.$refs.
form.validate(valid => {
if (valid) {
if (this.editIndex === -1) {
this.tableData.push({ name: this.
form.name, age: this.
form.age })
} else {
this.tableData.splice(this.editIndex, 1, { name: this.
form.name, age: this.
form.age })
}
this.dialogVisible = false
}
})
},
handleDelete(index) {
this.tableData.splice(index, 1)
},
},
computed: {
filteredData() {
return this.tableData.filter(item => item.name.indexOf(this.searchText) !== -1)
},
},
}
</script>
```
在上面的代码中，我们使用了 `el-table` 组件来展示数据，并用 `el-table-column` 组件来定义表格列。`el-dialog` 组件用于添加和编辑数据。我们用 `el-input` 组件来实现输入框，用 `el-button` 组件来实现按钮。
表格数据使用了 `tableData` 数组来存储，可以通过 `filteredData` 计算属性来实现搜索过滤。
添加和编辑数据时，我们使用了
表单验证和
表单重置。可以通过 `el-
form` 组件来实现
表单验证，用 `el-
form-item` 组件来定义
表单项。用 `ref` 属性来引用
表单实例，用 `$refs` 来获取
表单实例。
最后，我们可以通过 `handleAdd`、`handleEdit`、`handleSubmit` 和 `handleDelete` 方法来实现增删改功能。
扫一扫
4649
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
