How to use Vue and Element-UI to implement editable data tables

How to use Vue and Element-UI to implement an editable data table

Introduction:
In Web development, the data table is a very common component that can display a large amount of data in the form of a table , and can perform operations such as sorting, filtering and editing. This article will introduce how to use Vue and Element-UI to implement an editable data table.

1. Preparation
First, we need to install Vue and Element-UI.

1. Create a Vue project:

vue create editable-table
cd editable-table

2. Install Element-UI dependencies:

npm install element-ui -S

3. Introduce Element-UI into main.js:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

2. The basic structure of the data table
In the Vue component, we can use the el-table component provided by Element-UI to create a basic data table, and use el-table-column to define the header and Table columns.

1. Add the following code in the HelloWorld.vue file:

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="性别" prop="gender"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click.native="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '小明', age: 18, gender: '男' },
        { name: '小红', age: 20, gender: '女' },
        { name: '小李', age: 22, gender: '男' }
      ]
    }
  },
  methods: {
    handleEdit(row) {
      // 实现编辑功能
    }
  }
}
</script>

<style scoped>
</style>

In the above code, we added an el-button component for performing editing operations. The handleEdit method will be called when the edit button is clicked, and the data of the current row can be obtained through the parameters.

3. Implement the editing function
1. Add a dialog component:

// HelloWorld.vue
<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" title="编辑数据">
      <el-form :model="form" label-width="80px">
        <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-input v-model="form.gender"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveData">保存</el-button>
      </div>
    </el-dialog>

    <el-table :data="tableData" style="width: 100%">
      <!-- ...省略其他代码... -->
    </el-table>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash'

export default {
  data() {
    return {
      tableData: [
        { name: '小明', age: 18, gender: '男' },
        { name: '小红', age: 20, gender: '女' },
        { name: '小李', age: 22, gender: '男' }
      ],
      dialogVisible: false,
      form: {}
    }
  },
  methods: {
    handleEdit(row) {
      this.form = cloneDeep(row)
      this.dialogVisible = true
    },
    saveData() {
      // 根据实际需求实现保存逻辑
      this.dialogVisible = false
    }
  }
}
</script>

In the above code, we added an el-dialog component to pop up the dialog for editing data frame. When the edit button is clicked, we copy the row's data to the form object and set the visible property of the dialog box to true, that is, the dialog box is opened.

2. Implement the logic of saving data:
In the saveData method, we can save the modified data to the backend or local storage according to actual needs.

4. Summary:
By using Vue and Element-UI, we can quickly build an editable data table. We created a basic data table through the el-table component and el-table-column component, and implemented the data editing function through the el-button and el-dialog components. In actual projects, we can further customize and optimize the form according to needs to meet the specific needs of the project.

The above is a brief introduction and sample code for using Vue and Element-UI to implement editable data tables. I hope it will be helpful to you!

The above is the detailed content of How to use Vue and Element-UI to implement editable data tables. For more information, please follow other related articles on the PHP Chinese website!