1. 介绍
在前端开发中，表格是不可避免的一部分。但是，在某些情况下，用户需要能够直接在表格中编辑和选择行。本文将介绍如何使用Vue和Element-plus实现表格的可编辑和行选择。
在本文中，我们将使用Vue 2.6和Element-plus 1.0.2。
Vue 2.6
Element-plus 1.0.2
2. 安装Vue和Element-plus
首先，我们需要安装Vue和Element-plus。在此之前，请确保您已安装了Node.js并使用npm安装了Vue CLI。
2.1 安装Vue
使用以下命令安装Vue：
npm install vue2.2 安装Element-plus
使用以下命令安装Element-plus：
npm install element-plus3. 实现表格的行选择
首先，我们将实现表格的行选择功能。
3.1 创建一个基础表格
在创建表格之前，我们需要先定义表格的数据。在Vue组件中，我们可以将表格数据存储在data属性中。下面是一个基础表格的代码：
// 表格数据
data() {
return {
tableData: [
{
name: 'Jack',
age: 30,
address: 'Shanghai',
},
{
name: 'Lucy',
age: 24,
address: 'Beijing',
},
{
name: 'Tom',
age: 18,
address: 'Chengdu',
},
],
};
},
以下是如何在Vue组件中创建基础表格的代码：
<template>
<div>
<el-table :data="tableData">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</div>
</template>
以上代码将在页面上创建一个包含姓名、年龄和地址的表格。
3.2 实现表格的行选择
要实现表格的行选择，我们可以使用Element-plus的selection属性。
<template>
<div>
<el-table
:data="tableData"
@selection-change="handleSelectionChange"
:row-key="row => row.id"
:selectable='(row, index) => row.selectable !== false'
ref="table"
>
<el-table-column type="selection"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
id: 1,
name: 'Jack',
age: 30,
address: 'Shanghai',
},
{
id: 2,
name: 'Lucy',
age: 24,
address: 'Beijing',
selectable: false,
},
{
id: 3,
name: 'Tom',
age: 18,
address: 'Chengdu',
},
],
selection: [],
};
},
methods: {
handleSelectionChange(val) {
this.selection = val;
},
},
};
</script>
通过为<el-table-column>添加属性type="selection"，我们创建了选择列。表格的选择行现在可以通过selection属性访问。
需要注意的是，在数据对象中添加属性selectable: false，可以禁用某些行的选择。
4. 表格的可编辑行
接下来，我们将实现表格的可编辑行功能。
4.1 创建一个可编辑表格
为了使表格的行可编辑，我们需要确保每一行都可以编辑。我们可以使用<el-form>来实现这个目标。
<template>
<div>
<el-table
:data="form.tableData"
ref="table"
@cell-dblclick="handleCellDblclick"
:row-key="row => row.id"
show-summary
>
<el-table-column
type="index"
label="#"
width="55"
></el-table-column>
<el-table-column
prop="name"
label="Name"
:editable="true"
>
<template slot-scope="{ row }">
<el-input v-model="row.name"></el-input>
</template>
</el-table-column>
<el-table-column
prop="age"
label="Age"
:editable="true"
>
<template slot-scope="{ row }">
<el-input v-model="row.age"></el-input>
</template>
</el-table-column>
<el-table-column
prop="address"
label="Address"
:editable="true"
>
<template slot-scope="{ row }">
<el-input v-model="row.address"></el-input>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
form: {
tableData: [
{
id: 1,
name: 'Jack',
age: 30,
address: 'Shanghai',
},
{
id: 2,
name: 'Lucy',
age: 24,
address: 'Beijing',
},
{
id: 3,
name: 'Tom',
age: 18,
address: 'Chengdu',
},
],
},
};
},
methods: {
handleCellDblclick(row, column, cell) {
const table = this.$refs.table;
table.setCurrentRow(row);
const currentColumn = table.getColumnByCell(cell);
!currentColumn.editable && this.$notify({
title: "Warning",
message: "You can only edit " + table.editableColumns.join(", ") + " in this demo.",
type: "warning",
});
},
},
computed: {
editableColumns() {
return this.columns.filter((column) => column.editable).map((column) => column.label);
},
},
};
</script>
上述代码中，我们为每个列添加了editable属性，并使用插槽将<el-input>元素添加到每个单元格中。
我们还添加了一个双击<el-table>中单元格而不是行的事件，以确保用户可以在单元格中进行编辑。如果所选列不可编辑，则显示一个警告消息。用户可以在computed属性中查看哪些列是可编辑的。
5. 结论
Vue和Element-plus是非常强大的工具，可以帮助我们实现表格的可编辑和行选择。在本文中，我们通过使用Vue和Element-plus成功地实现了一个可编辑的表格和一个可选择行的表格。
希望这篇文章能够帮助您更好地处理和展示数据。