如何通过vue和Element-plus实现表格的可编辑和行选择-猿码集

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 vue

2.2 安装Element-plus

使用以下命令安装Element-plus：

npm install element-plus

3. 实现表格的行选择

首先，我们将实现表格的行选择功能。

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成功地实现了一个可编辑的表格和一个可选择行的表格。

希望这篇文章能够帮助您更好地处理和展示数据。

如何通过vue和Element-plus实现表格的可编辑和行选择