ElementUI需求功能收集

• span和input结构切换

<el-table ref="tableDemo" style="width: 100%;margin-bottom: 20px;" row-key="id" :data="tableDemoData" border="">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="姓名">
        <template slot-scope="scope">
          <span v-if="!scope.row.isEditing" @click="editRow(scope.$index)">
            {{ scope.row.name }}
          </span>
          <el-input v-else v-model="scope.row.name" :ref="'editInput' + scope.$index " @blur="saveEdit(scope.$index)" @keyup.enter.native="saveEdit(scope.$index)" />
        </template>
      </el-table-column>
 </el-table>
 
 ........
 data(){
 	return {
 		tableDemoData: [{
            name: '张三',
            isEditing: false
          },
          {
            name: '李四',
            isEditing: false
          }
        ], // 测试数据
 	}
 }
 ......
 methods: {
 	  // 测试
      editRow(index) {
        this.tableDemoData[index].isEditing = true;
        this.$nextTick(() => {
          this.$refs[`editInput${index}`].focus();
        });
      },
      saveEdit(index) {
        this.tableDemoData[index].isEditing = false;
      },
 }