列表嵌入表单实现操作行添加与删除

<template>
  <div class="table-container-wapper tab-wapper">
    <div class="header-container">
      <div class="buttton-contain">
        <el-button :size="$formSize" icon="el-icon-circle-plus-outline" @click="handleAdd">增加指令</el-button>
      </div>
    </div>
    <div class="center-container">
      <el-table ref="table" :data="tableData" header-row-class-name="iot-table-header" v-loading="isTableLoading">
        <template slot="empty">
          <el-empty description="暂无数据"></el-empty>
        </template>
        <el-table-column label="名称" prop="name">
          <template slot-scope="scope">
            <span v-if="scope.row.isEdit">{{scope.row.name}}</span>
            <el-input v-else v-model="scope.row.name" size="small" label-width="80px" placeholder="请输入" maxlength="32"/>
          </template>
        </el-table-column>
        <el-table-column label="识别符" prop="code">
          <template slot-scope="scope">
            <span v-if="scope.row.isEdit">{{scope.row.code}}</span>
            <el-input v-else v-model="scope.row.code" size="small" label-width="80px" placeholder="请输入" maxlength="32"/>
          </template>
        </el-table-column>
        <el-table-column label="是否隐藏" prop="isHead">
          <template slot-scope="scope">
            <span v-if="scope.row.isEdit">{{scope.row.isHead}}</span>
            <el-select v-else v-model="scope.row.isHead" placeholder="全部">
              <el-option v-for="item in isHeadList" :key="item.id" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="读写类型" prop="type">
          <template slot-scope="scope">
            <span v-if="scope.row.isEdit">{{scope.row.type}}</span>
            <el-select v-else v-model="scope.row.type" placeholder="全部">
              <el-option v-for="item in typeList" :key="item.id" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="关联物模型" prop="model">
          <template slot-scope="scope">
            <span v-if="scope.row.isEdit">{{scope.row.model}}</span>
            <el-select v-else v-model="scope.row.model" multiple placeholder="请选择">
              <el-option v-for="item in modelList" :key="item.id" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="120">
          <template slot-scope="scope">
            <el-button v-if="scope.row.isEdit" type="text" @click="handleEdit(scope.row)" icon="el-icon-edit"></el-button>
            <el-button v-if="!scope.row.isEdit" type="text" @click="handelConfirm(scope.row)" icon="el-icon-check"></el-button>
            <el-button type="text" class="text-delbtn" @click="handleDelete(scope)" icon="el-icon-delete"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      tableData:[],
      isHeadList:[
        {id:'0',value:'否',label:'否'},
        {id:'1',value:'是',label:'是'}
      ],
      typeList:[
        {id:'0',value:'可读',label:'可读'},
        {id:'1',value:'可写',label:'可写'}
      ],
      modelList:[
        {id:'0',value:'亮度（C001）',label:'亮度（C001）'},
        {id:'1',value:'开关（C002）',label:'开关（C002）'},
        {id:'2',value:'温度（C003）',label:'温度（C003）'},
      ]
    }
  },
  created(){
    this.getList()
  },
  methods:{
    //获取列表
    getList(){
      this.tableData=[
        {
          name:'亮度',
          code:'C001',
          isHead:'是',
          type:'可读',
          model:['亮度（C001）','开关（C002）']
        }
      ]
      this.tableData.forEach(item=>{
        item.isEdit=true
        return item;
      })
      this.tableData=JSON.parse(JSON.stringify(this.tableData))//解决数据渲染问题
      console.log(this.tableData)
    },
    //添加行
    handleAdd(){
      this.tableData.push({
        name:'',
        code:'',
        isHead:'',
        type:'',
        model:[],
        isEdit:false,
      })
    },
    //行表单内容保存
    handelConfirm(row){
      console.log(row)
      row.isEdit=true
    },
    //对行内容进行编辑，显示表单
    handleEdit(row){
      console.log(row)
      row.isEdit=false
    },
    //删除行
    handleDelete(scope){
      console.log(scope)
      this.tableData.splice(scope.$index, 1);
    },
  }
}
</script>