How to implement table editability and row selection through vue and Element-plus

How to implement table editability and row selection through vue and Element-plus

Introduction:
When developing web applications, tables are one of the frequently used components. Table editability and row selection functions are very common and practical requirements. In the Vue.js framework, these two functions can be easily achieved by combining the Element-plus component library. This article will introduce how to implement table editability and row selection functions through Vue and Element-plus, and provide corresponding code examples.

1. Project preparation
First, make sure that Vue.js and Element-plus have been installed, and create a Vue project. You can install Vue CLI and create a new Vue project through the following command:

npm install -g @vue/cli
vue create vue-table-demo
cd vue-table-demo
npm install element-plus

2. Create an editable table

1. In the Vue template, use el-table component to display table data, and set the edit attribute to true to achieve editable functionality. In addition, you can also add @edit event listeners to operate on table data in the editing state.

<template>
  <el-table :data="tableData" :edit="true" @edit="handleEdit">
    <el-table-column prop="name" label="姓名" editable></el-table-column>
    <el-table-column prop="age" label="年龄" editable></el-table-column>
    <el-table-column prop="gender" label="性别" editable></el-table-column>
    <el-table-column prop="address" label="地址" editable></el-table-column>
  </el-table>
</template>

2. In the Vue script, define the table data tableData and the method to handle the edit event handleEdit. Here, you can obtain the modified table row data and modified data, and perform corresponding processing, such as updating data, sending API requests, etc.

<script>
export default {
  data() {
    return {
      tableData: [
        { name: "张三", age: 20, gender: "男", address: "北京" },
        { name: "李四", age: 25, gender: "女", address: "上海" },
        { name: "王五", age: 30, gender: "男", address: "广州" },
      ],
    };
  },
  methods: {
    handleEdit(row, column, cell) {
      // 获取被修改的表格行数据和修改后的数据
      const { oldValue, value } = cell;
      console.log("原始值：", oldValue);
      console.log("修改后的值：", value);

      // 更新数据或发送API请求
      // ...
    },
  },
};
</script>

3. Implement the row selection function

1. In the Vue template, use the el-table component and set selectionProperty is true to enable row selection functionality. In addition, you can also add @selection-change event listener to obtain the selected row data.

<template>
  <el-table :data="tableData" :edit="true" :selection="true" @selection-change="handleSelectionChange">
    <el-table-column type="selection"></el-table-column>
    <el-table-column prop="name" label="姓名" editable></el-table-column>
    <el-table-column prop="age" label="年龄" editable></el-table-column>
    <el-table-column prop="gender" label="性别" editable></el-table-column>
    <el-table-column prop="address" label="地址" editable></el-table-column>
  </el-table>
</template>

2. In the Vue script, define the method to handle the selection change event handleSelectionChange. Here, you can obtain the selected row data and perform corresponding processing, such as updating status, deleting data, sending API requests, etc.

<script>
export default {
  data() {
    return {
      tableData: [
        { name: "张三", age: 20, gender: "男", address: "北京" },
        { name: "李四", age: 25, gender: "女", address: "上海" },
        { name: "王五", age: 30, gender: "男", address: "广州" },
      ],
      selectedRows: [],
    };
  },
  methods: {
    handleSelectionChange(selection) {
      // 获取选择的行数据
      this.selectedRows = selection;
      console.log("选择的行数据：", this.selectedRows);

      // 更新状态或发送API请求
      // ...
    },
  },
};
</script>

Conclusion:
This article introduces how to implement two common functions of table editability and row selection through Vue and Element-plus. By setting the corresponding properties and event listeners, you can easily implement these functions and operate on table data. Hope this article is helpful for building a table with editable and selection functions using Vue and Element-plus.

The above is all about how to realize the editability and row selection of tables through Vue and Element-plus. I hope it will be helpful to you. I wish you use Vue and Element-plus to develop more outstanding web applications!

The above is the detailed content of How to implement table editability and row selection through vue and Element-plus. For more information, please follow other related articles on the PHP Chinese website!