vue elementui 编辑表格

Vue ElementUI 是 Vue.js 的 UI 组件库，是一款基于 Vue.js 的桌面端组件库。它提供了一些常用的 UI 组件，例如按钮、输入框、下拉列表、表格等。其中，表格是一种非常常见的组件，在数据展示和数据编辑上都有着重要的作用。

在使用 Vue ElementUI 编辑表格时，我们通常需要以下步骤：

1. 安装 Vue ElementUI

首先，我们需要使用 npm 安装 Vue ElementUI:

npm i element-ui -S

2. 引入 Vue ElementUI

在需要使用 Vue ElementUI 的组件中引入 Vue ElementUI：

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

Vue.use(ElementUI);

3. 使用表格组件

Vue ElementUI 提供了一个非常方便的表格组件，我们只需要配置表格的列和数据，表格就可以自动生成。同时，表格支持编辑、排序、分页等常见操作。

<el-table :data="tableData">
  <el-table-column label="姓名" prop="name"></el-table-column>
  <el-table-column label="年龄" prop="age"></el-table-column>
  <el-table-column label="地址" prop="address"></el-table-column>
  <el-table-column label="操作" width="150">
    <template slot-scope="scope">
      <el-button size="mini" @click="edit(scope.$index, scope.row)">编辑</el-button>
      <el-button size="mini" type="danger" @click="del(scope.$index)">删除</el-button>
    </template>
  </el-table-column>
</el-table>

如上所示，我们只需要传入一个数组（tableData），以及配置每一列的 prop 和 label，就可以生成一个表格。同时，我们还可以在某一列中使用 slot，进行自定义操作，例如上面的“编辑”和“删除”按钮。

4. 编辑数据

在表格中编辑数据通常有两种方式：单元格编辑和行编辑。单元格编辑是指用户点击单元格后，编辑内容并保存；行编辑是指用户点击编辑按钮后，进入一条数据的编辑页面。

对于单元格编辑，Vue ElementUI 提供了 el-table-editable 组件：

<el-table :data="tableData">
  <el-table-column label="姓名" prop="name" editable></el-table-column>
  <el-table-column label="年龄" prop="age" editable></el-table-column>
  <el-table-column label="地址" prop="address" editable></el-table-column>
</el-table>

而对于行编辑，则需要自行实现一个编辑页面，例如使用 Dialog 组件等。一般来说，编辑页面会接收一个具体的数据项作为 prop，并在界面中展示该数据项的各个字段，允许用户进行修改。

综上所述，Vue ElementUI 编辑表格具有简单易用、配置灵活等特点，是一款非常实用的组件库，广泛应用于数据管理、后台管理等多个领域。