变表格数据变输入框：Element+Vue3完美方案

前端

2023-06-03 05:35:17

动态编辑表格数据：Vue3 + Element Plus 的巧妙解决方案

在数据管理中，表格编辑是必不可少的，让用户可以便捷地修改数据。凭借 Vue 3 和 Element Plus 的强大组合，实现点击编辑表格数据变得前所未有地轻松。本文将深入探讨如何使用这些工具，让您的表格焕发生机，提升用户体验。

先决条件

踏上这一旅程之前，请确保您已安装以下必备元素：

Vue 3
Element Plus

项目创建

首先，使用 Vue CLI 创建一个新的 Vue 项目：

vue create vue-table-editing

Element Plus 安装

接下来，通过 npm 安装 Element Plus：

npm install element-plus

Element Plus 导入

在您的 Vue 文件中，导入必要的 Element Plus 组件：

import { ElTable, ElTableColumn, ElInput } from 'element-plus'

Vue.component('ElTable', ElTable)
Vue.component('ElTableColumn', ElTableColumn)
Vue.component('ElInput', ElInput)

数据准备

为了填充我们的表格，让我们准备一些数据：

const data = [
  {
    name: 'John Doe',
    age: 30,
    city: 'New York'
  },
  {
    name: 'Jane Smith',
    age: 25,
    city: 'London'
  },
  {
    name: 'Michael Jones',
    age: 40,
    city: 'Paris'
  }
]

表格构建

是时候构建我们的表格了：

<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="city" label="City"></el-table-column>
      <el-table-column label="Actions">
        <template #default="scope">
          <button @click="editRow(scope.row)">Edit</button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ElTable, ElTableColumn, ElInput } from 'element-plus'

export default {
  components: { ElTable, ElTableColumn, ElInput },
  data() {
    return {
      tableData: data
    }
  },
  methods: {
    editRow(row) {
      row.editing = true
    }
  }
}
</script>

自定义编辑组件

为了让我们的表格具有编辑能力，我们需要一个自定义的编辑组件：

<template>
  <el-input v-model="row.name"></el-input>
</template>

<script>
export default {
  props: {
    row: {
      type: Object,
      required: true
    }
  }
}
</script>

编辑组件集成

现在，将我们的自定义编辑组件集成到表格中：

<el-table-column prop="name" label="Name">
  <template #default="scope">
    <span v-if="!scope.row.editing">{{ scope.row.name }}</span>
    <custom-editor v-else :row="scope.row"></custom-editor>
  </template>
</el-table-column>