1. 概述
随着Web应用程序的流行，数据表格成为Web应用程序中不可或缺的组件之一。在本文中，我们将学习如何使用Vue和Element-UI实现可编辑的数据表格。
2. Element-UI简介
2.1 什么是Element-UI
Element-UI是一个基于Vue.js的UI框架，它提供了丰富的组件和样式，可以帮助开发者快速构建Web应用程序。它的组件使用了许多流行的设计语言，如Material Design和Flat Design等。Element-UI的核心组件包括：表单、表格、弹框、按钮等。
2.2 Element-UI的优点
易用性：Element-UI提供了封装好的组件和样式，可以很方便地使用。
可定制性：Element-UI提供了自定义主题的功能，可以根据自己的需求修改组件的样式。
生态完善：Element-UI的生态非常完善，社区提供了大量的插件和第三方库。
3. 实现可编辑的数据表格
3.1 确定需求
在实现可编辑的数据表格之前，我们需要确定我们的需求。在本篇文章中，我们的需求如下：
显示表格数据
支持对表格数据进行增删改
支持表格数据的排序和筛选
3.2 创建Vue项目
首先，我们需要创建一个基于Vue的项目。可以使用Vue CLI来快速创建项目：
npm install -g @vue/cli
vue create my-project
3.3 安装Element-UI
Element-UI可以通过npm安装：
npm install element-ui -S
安装完成后，我们需要引入Element-UI：
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
3.4 创建数据表格组件
下面，我们将创建一个数据表格组件，用于显示表格数据：
// MyTable.vue
<template>
<el-table
:data="tableData"
:header-cell-style="{background: '#f7d198'}"
v-loading="loading">
<el-table-column type="index" width="55"></el-table-column>
<el-table-column
label="姓名"
prop="name"
sortable
:formatter="formatName">
</el-table-column>
<el-table-column
label="邮箱"
prop="email">
</el-table-column>
<el-table-column
label="电话"
prop="phone">
</el-table-column>
<el-table-column
label="操作"
width="120"
fixed="right">
<template slot-scope="scope">
<el-button
type="text"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
type="text"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [],
loading: false
}
},
methods: {
formatName(row, column, cellValue) {
return row.name ? row.name : '-'
},
handleEdit(index, row) {
// handleEdit方法用于编辑某一行数据
},
handleDelete(index, row) {
// handleDelete方法用于删除某一行数据
}
}
}
</script>
上面的代码中，我们使用了Element-UI的el-table和el-table-column组件，它们可以帮助我们快速地创建一个数据表格。其中，el-table的:data属性用于绑定表格数据，:loading属性用于控制加载状态，el-table-column的:label属性用于设置表头名称，prop属性用于绑定行数据的字段，:formatter属性用于格式化行数据，fixed属性用于固定列。
3.5 填充表格数据
为了让表格显示数据，我们需要填充表格数据。我们可以使用Vue的生命周期函数created来获取数据。本例中，我们通过API请求获取数据：
// MyTable.vue
<script>
export default {
data() {
return {
tableData: [],
loading: false
}
},
created() {
this.getData()
},
methods: {
getData() {
this.loading = true
this.$http.get('/api/data')
.then(response => {
this.tableData = response.data
this.loading = false
})
.catch(error => {
console.log(error)
this.loading = false
})
},
formatName(row, column, cellValue) {
return row.name ? row.name : '-'
},
handleEdit(index, row) {
// handleEdit方法用于编辑某一行数据
},
handleDelete(index, row) {
// handleDelete方法用于删除某一行数据
}
}
}
</script>
上面的代码中，我们在created生命周期函数中调用getData方法来获取表格数据。
getData方法通过Vue-resource发送GET请求到API，获取表格数据。
3.6 增加编辑和删除功能
在数据表格中增加编辑和删除功能非常常见。我们通过定义两个方法来实现它们。具体实现如下：
// MyTable.vue
<script>
export default {
data() {
return {
tableData: [],
loading: false
}
},
created() {
this.getData()
},
methods: {
getData() {
this.loading = true
this.$http.get('/api/data')
.then(response => {
this.tableData = response.data
this.loading = false
})
.catch(error => {
console.log(error)
this.loading = false
})
},
formatName(row, column, cellValue) {
return row.name ? row.name : '-'
},
handleEdit(index, row) {
// handleEdit方法用于编辑某一行数据
},
handleDelete(index, row) {
this.$confirm('确定要删除该记录吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.loading = true
this.$http.delete(`/api/data/${row.id}`)
.then(response => {
this.loading = false
this.$message.success('删除成功')
this.tableData.splice(index, 1)
})
.catch(error => {
console.log(error)
this.loading = false
})
})
.catch(() => {})
}
}
}
</script>
上面的代码中，我们使用了Element-UI的el-dialog组件来创建编辑弹框。我们还使用了Vue的$confirm方法来创建删除确认框。
3.7 实现表格数据的排序和筛选
在数据表格中，排序和筛选是非常重要的功能。我们可以通过Element-UI提供的属性来实现这些功能。具体实现如下：
// MyTable.vue
<template>
<el-table
:data="tableData"
:header-cell-style="{background: '#f7d198'}"
v-loading="loading"
:sort-order="sortOrder"
:sort-by="sortBy"
@sort-change="handleSortChange"
:filter-method="filterTable">
<el-table-column type="index" width="55"></el-table-column>
<el-table-column
label="姓名"
prop="name"
sortable
:formatter="formatName">
</el-table-column>
<el-table-column
label="邮箱"
prop="email">
</el-table-column>
<el-table-column
label="电话"
prop="phone">
</el-table-column>
<el-table-column
label="操作"
width="120"
fixed="right">
<template slot-scope="scope">
<el-button
type="text"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
type="text"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [],
loading: false,
sortOrder: '',
sortBy: '',
filterName: ''
}
},
created() {
this.getData()
},
methods: {
getData() {
this.loading = true
this.$http.get('/api/data')
.then(response => {
this.tableData = response.data
this.loading = false
})
.catch(error => {
console.log(error)
this.loading = false
})
},
formatName(row, column, cellValue) {
return row.name ? row.name : '-'
},
handleEdit(index, row) {
// handleEdit方法用于编辑某一行数据
},
handleDelete(index, row) {
this.$confirm('确定要删除该记录吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.loading = true
this.$http.delete(`/api/data/${row.id}`)
.then(response => {
this.loading = false
this.$message.success('删除成功')
this.tableData.splice(index, 1)
})
.catch(error => {
console.log(error)
this.loading = false
})
})
.catch(() => {})
},
handleSortChange({ column, prop, order }) {
this.sortOrder = order
this.sortBy = prop
},
filterTable(value, row, column) {
const name = row.name.toLowerCase()
return name.indexOf(value.toLowerCase()) !== -1
}
}
}
</script>
上面的代码中，我们使用了el-table的@sort-change属性来处理表格数据的排序。如果用户点击了表头排序，则会触发该事件。我们还使用了:filter-method属性来实现表格数据的筛选。当用户在搜索框中输入文字时，该方法会被触发。我们在filterTable方法中对表格数据进行筛选。
4. 结论
本文中，我们使用了Vue和Element-UI来实现一个可编辑的数据表格。我们学习了如何使用el-table和el-table-column组件来创建数据表格，如何填充表格数据，如何实现编辑和删除功能，以及如何实现表格数据的排序和筛选。