Vue和Element-UI是现在比较流行的一种前端开发组合，使用它们可以快速地建立一个具有数据增删改查功能的Web应用程序。本文将会介绍如何使用Vue和Element-UI实现数据的增删改查功能。
1. Vue和Element-UI简介
Vue是一种用于构建用户界面的渐进式框架，它专注于视图层，采用了响应式的数据绑定和组件化的思想，使得开发者能够快速构建复杂的单页应用程序。Element-UI是一套Vue组件库，它提供了一系列优雅且易于使用的UI组件，包括了按钮、表单、布局、对话框、通知等组件，可以快速地为Web应用程序搭建组件库。
2. 数据展示
在实现数据增删改查之前，首先需要把数据展示出来。我们可以使用Element-UI的Table组件，把数据放在表格中展示出来。
2.1. Table组件的使用
Table组件是Element-UI中非常好用的一个组件，它可以接受一个数组作为数据源，并且可以设置表格的列数和每一列的数据类型。下面是一个简单的例子：
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="Name" label="姓名"></el-table-column>
<el-table-column prop="Age" label="年龄"></el-table-column>
<el-table-column prop="Sex" label="性别"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
Name: '张三',
Age: 20,
Sex: '男'
},
{
Name: '李四',
Age: 22,
Sex: '女'
},
{
Name: '王五',
Age: 25,
Sex: '男'
}
]
};
}
};
</script>
以上代码中，我们使用了Table组件来展示数据，并且设置了三列，分别是姓名、年龄和性别。
2.2. 数据分页展示
当数据量很大的时候，我们还需要对数据进行分页展示，Element-UI同样提供了一个好用的组件——pagination分页组件。下面是一个例子：
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="Name" label="姓名"></el-table-column>
<el-table-column prop="Age" label="年龄"></el-table-column>
<el-table-column prop="Sex" label="性别"></el-table-column>
</el-table>
<el-pagination
:current-page.sync="currentPage"
:page-size="pageSize"
layout="prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
currentPage: 1,
pageSize: 10,
total: 100
};
}
};
</script>
以上代码中，我们在Table组件下方加入了一个Pagination分页组件，可以设置每页展示的条数，同时也可以手动跳转页面。
3. 数据增删改
我们已经展示了数据，接下来我们需要在界面上对数据进行增删改的操作。Element-UI提供了一些可以直接使用的组件来实现这些操作。
3.1. Table中的行内操作
Table的每一行都可以直接添加操作按钮，例如删除和编辑按钮。Element-UI提供了一个专门的组件el-table-column，可以用来设置这些操作按钮。
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="Name" label="姓名"></el-table-column>
<el-table-column prop="Sex" label="性别"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
<el-button type="danger" size="small" @click="remove(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
以上代码中，我们使用了el-table-column组件来设置编辑和删除按钮，当按钮被点击后会触发指定的方法，比如删除数据:
remove(row) {
const index = this.tableData.indexOf(row);
this.tableData.splice(index, 1);
}
以上代码中，我们根据选中的行数据，通过数组的splice方法进行数据删除。
3.2. 表单添加数据
除了行内添加数据操作，我们还可以使用表单来添加数据，这时需要使用Element-UI的Dialog对话框组件和Form表单组件。
<template>
<div>
<el-button type="primary" @click="addDialogVisible = true">添加数据</el-button>
<el-dialog
title="添加数据"
:visible.sync="addDialogVisible"
@closed="AddDialogClosed">
<el-form :model="form">
<el-form-item label="姓名">
<el-input v-model="form.Name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="form.Age"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.Sex">
<el-radio :label="'男'">男</el-radio>
<el-radio :label="'女'">女</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="addDialogVisible = false">取消</el-button>
<el-button type="primary" @click="addData">添加数据</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
addDialogVisible: false,
form: {
Name: '',
Age: null,
Sex: ''
}
};
},
methods: {
addData() {
this.tableData.push({
Name: this.form.Name,
Age: this.form.Age,
Sex: this.form.Sex
});
this.addDialogVisible = false;
},
AddDialogClosed() {
this.form = {
Name: '',
Age: null,
Sex: ''
};
}
}
};
</script>
以上代码中，我们使用了Dialog组件来展示添加数据的表单，表单控件使用了Form组件中的各种控件，然后通过点击“添加数据”按钮将添加的数据插入到Table组件中。
4. 总结
本文介绍了如何使用Vue和Element-UI实现数据的增删改查功能，包括了使用Table组件展示数据、使用Pagination分页组件进行数据分页展示、使用el-table-column组件设置行内操作和使用Form表单组件添加数据。使用Vue和Element-UI可以快速地搭建一个具有完整的管理界面的Web应用程序，使得我们可以更加高效地完成开发任务。