ElementUI编辑表格单元格与查看模式切换的应用

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="日期" width="180">
      <template slot-scope="scope">
        {{ scope.row.date }}
      </template>
    </el-table-column>
    <el-table-column label="状态" width="100">
      <template slot-scope="scope">
        {{ scope.row.status }}
      </template>
    </el-table-column>
    <el-table-column label="操作" width="100">
      <template slot-scope="scope">
        <el-button @click="handleEdit(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
        <el-button @click="handleView(scope.$index, scope.row)" type="text" size="small">查看</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '李小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }],
      currentIndex: -1,
      currentRow: {}
    }
  },
  methods: {
    handleEdit(index, row) {
      this.currentIndex = index;
      this.currentRow = row;
      // 执行编辑操作...
    },
    handleView(index, row) {
      this.currentIndex = index;
      this.currentRow = row;
      // 执行查看操作...
    }
  }
}
</script>

这个简单的示例展示了如何在Element UI的表格组件中添加编辑和查看操作。当用户点击编辑或查看按钮时，对应的行索引和数据会被记录下来，然后可以执行相应的编辑或查看操作。这个例子只是展示了如何在Vue组件中处理这种行为，并未包含实际的编辑或查看逻辑。