【vue】el-table里面点击展开嵌套el-input和el-select 动态切换数据

目录

• • 一：嵌套el-input
  • 二：嵌套el-select

一：嵌套el-input

<el-table-column label="名" width="300">
    <template slot-scope="scope">
      <div v-if="editIndex !== scope.$index">
        <span>{{ scope.row.name }}</span>
        <i class="el-icon-edit" @click="toEditName(scope.$index, scope.row.name)" />
      </div>
      <div v-else>
        <el-input v-model="editName" size="mini" style="width: 60%" />
        <el-button type="text" @click="toSaveName(scope.row)">保存</el-button>
        <el-button type="text" @click="toCancelEdit()">取消</el-button>
      </div>
    </template>
</el-table-column>


toEditName(index, name) {
  this.editIndex = index
  this.editName = name
},
 // 取消编辑
 toCancelEdit() {
   this.editIndex = -1
   this.editName = ''
 },
 async toSaveName(row) {
    const params = {
       code: row.code,
       name: this.editName
     }
 const res = await updateIntent(params)
   if (res.code === 0) {
     this.editIndex = -1
     this.editName = ''
     this.filterList()
   }
 },

二：嵌套el-select

<el-table-column prop="searchConfig" label="素材字段">
        <template v-slot="scope">
          <span v-if="scope.$index !==tabClickIndex && scope.row.searchConfig.esSearchType === 'MATCH_MULTI_FIELDS'" @click="cellClick(scope.row,scope.$index)"> {{ searchConfig[scope.$index] ? searchConfig[scope.$index]:scope.row.searchConfig.targetFields[0] }}</span>
          <el-select v-if="scope.$index ===tabClickIndex && scope.row.searchConfig.esSearchType === 'MATCH_MULTI_FIELDS'" v-model="searchConfig[scope.$index]" placeholder="请选择" @visible-change="searchBlur" @change="searchChange($event,scope.row,scope.$index)">
            <el-option
              v-for="item in scope.row.searchConfig.targetFields"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
          <span v-if="scope.$index !==tabClickIndex && scope.row.searchConfig.esSearchType !== 'MATCH_MULTI_FIELDS'">{{ scope.row.searchConfig.targetFields.map(item=>item).join(',') }}</span>
   </template>
</el-table-column>

cellClick(row, event) {
     this.tabClickIndex = event
},
searchChange(event, row, index) {
     row.searchConfig.name = row.searchConfig.targetFieldsWeightParam[event]
     this.weightParam[index] = row.searchConfig.name + ''
},
searchBlur(event) {
   if (!event) {
     this.tabClickIndex = -1
    }
}