element-ui实现表格内容修改

在Element UI中，可以使用<el-table>组件来展示表格数据，并结合<el-input>组件来实现表格内容的编辑。以下是一个简单的例子，展示如何在Element UI中实现行内编辑：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
      <template slot-scope="scope">
        <el-input
          v-if="scope.row.edit"
          v-model="scope.row.name"
          size="small"
          @blur="handleInputBlur(scope.row)"
        ></el-input>
        <span v-else>{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="150">
      <template slot-scope="scope">
        <el-button
          v-if="!scope.row.edit"
          size="small"
          icon="el-icon-edit"
          @click="handleEdit(scope.row)"
        ></el-button>
        <el-button
          v-if="scope.row.edit"
          size="small"
          type="success"
          icon="el-icon-circle-check"
          @click="handleSave(scope.row)"
        ></el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '张三',
          edit: false
        },
        // ... 其他数据
      ]
    }
  },
  methods: {
    handleEdit(row) {
      row.edit = true;
    },
    handleSave(row) {
      row.edit = false;
    },
    handleInputBlur(row) {
      row.edit = false;
    }
  }
}
</script>

在这个例子中，我们定义了一个包含date和name的tableData数组。在<el-table-column>中，我们使用template插槽来根据行数据的edit属性决定是否显示<el-input>组件。当用户点击编辑按钮时，我们将该行的edit属性设置为true，显示<el-input>；编辑完成后，可以点击确认按钮或失去焦点来触发保存操作，此时将edit属性设置回false，并可以执行进一步的保存操作，比如发送请求到后端服务器更新数据。