element.ui中table中嵌套input

最近项目中有需要在table中放入input 实现增、删、查、改。写了个简单的小demo记录一下。

 <el-table :data="tableData" border stripe style="width: 100%;">
        <el-table-column prop="name" label="姓名">
          <template slot-scope="scope">
            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
            <span v-else>{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别">
          <template slot-scope="scope">
            <el-select v-if="scope.row.edit" v-model="scope.row.sex" placeholder="请选择">
              <el-option label="男" value="1">男</el-option>
              <el-option label="女" value="2">女</el-option>
            </el-select>
            <span v-else>
              <p v-if="scope.row.sex==1">男</p>
              <p v-if="scope.row.sex==2">女</p>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.edit" type="text" size="medium" @click="confirmAdd(scope.row)">
              <i class="el-icon-check" aria-hidden="true"></i>
            </el-button>
            <div v-else>
              <el-button type="text" size="medium" @click="editData(scope.row)">
                <i class="el-icon-edit" aria-hidden="true"></i>
              </el-button>
              <el-button type="text" size="medium" @click="deleteData(scope.row,scope.$index)">
                <i class="el-icon-delete" aria-hidden="true"></i>
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="text" @click="addData">添加数据</el-button>
      <el-divider></el-divider>
      <el-button @click="submitData">提交 </el-button>
<script>
  export default {
    name: "demo",
    data() {
      return {
        tableData: [],
      }
    },
    methods: {
      //添加
      addData() {
        this.tableData.push({
          edit: true,
        });
      },
      //确认添加
      confirmAdd(row) {
        row.edit = false;
      },
      //修改
      editData(row) {
        row.edit = true;
      },
      //删除
      deleteData(row, index) {
        this.tableData.splice(index, 1);
      },
      submitData() {
        alert(JSON.stringify(this.tableData))
      }
    }
  }

</script>

效果图

大自然的搬运工，链接地址：blog.csdn.net/weixin_4375…