首先，我们需要安装 `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` 方法来
实现增删改功能。
本文详细介绍了如何利用ElementUI库在Vue.js项目中实现表格数据的增加、删除、修改和查询功能，通过JavaScript进行交互逻辑处理，打造高效易用的前端界面。
最低0.47元/天 解锁文章
3468
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
