Element UI 表格简单内联编辑用法详解

VUE+Element UI实现了表格行内编辑效果，其原理是通过CSS控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示。

使用步骤如下：

1. 安装Element UI，在项目中使用npm或yarn安装Element UI：

npm install element-ui

2. 在main.js中引入Element UI：

import ElementUI from 'element-ui'
Vue.use(ElementUI)

3. 在HTML模板中添加表格：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
  <el-table-column prop="edit" label="操作">
    <template slot-scope="scope">
      <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
    </template>
  </el-table-column>
</el-table>

4. 在JavaScript代码中定义tableData数据：

export default {
  data() {
    return {
      tableData: [
        {
          name: 'John',
          age: 20,
          address: '123 Main Street'
        },
        {
          name: 'Jane',
          age: 25,
          address: '456 Elm Street'
        },
        {
          name: 'Tom',
          age: 30,
          address: '789 Oak Street'
        }
      ]
    }
  },
  methods: {
    handleEdit(row) {
      row.editing = true;
    }
  }
}

5. 在CSS中添加样式：

.el-table .editing-row {
  background-color: #f5f5f5;
}

.el-table .editing-row td {
  padding: 0;
}

.el-table .editing-row .el-input-group {
  width: 100%;
}

通过以上步骤，您就可以实现表格行内编辑的效果。Element UI 提供了丰富的API和组件，可以帮助您快速构建各种复杂的功能。