el-table中实现点击表格实现填充input实现编辑

Question

点击实现图标中的编辑模式！

Answer 1

      <el-table-column min-width="300px" label="标题">
        <template scope="scope">
          <el-input v-show="scope.row.edit" size="small" v-model="scope.row.title"></el-input>
          <span v-show="!scope.row.edit">{{ scope.row.title }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="编辑" width="120">
        <template scope="scope">
          <el-button :type="scope.row.edit?'success':'primary'" @click='scope.row.edit=!scope.row.edit' size="small" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
        </template>
      </el-table-column>

行内多个编辑

<el-table-column width="220px" label="作者">
        <template scope="scope">
          <el-input v-show="scope.row.edit.author" size="small" v-model="scope.row.author" style="width:100px"></el-input>
          <span v-show="!scope.row.edit.author">{{ scope.row.author }}</span>
          <el-button :type="scope.row.edit.author?'success':'primary'" @click='scope.row.edit.author=!scope.row.edit.author' size="small" icon="edit">{{scope.row.edit.author?'完成':'编辑'}}</el-button>
        </template>
      </el-table-column>
      <el-table-column min-width="300px" label="标题">
        <template scope="scope">
          <el-input v-show="scope.row.edit.title" size="small" v-model="scope.row.title" style="width:300px"></el-input>
          <span v-show="!scope.row.edit.title">{{ scope.row.title }}</span>
          <el-button :type="scope.row.edit.title?'success':'primary'" @click='scope.row.edit.title=!scope.row.edit.title' size="small" icon="edit">{{scope.row.edit.title?'完成':'编辑'}}</el-button>
        </template>
      </el-table-column>
  
  
    //=================== script  =======================
      
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        //获取数据
        fetchList(this.listQuery).then(response => {
          const items = response.data.items
          this.list = items.map(v => {
             //整行
            //this.$set(v, 'edit', false)
             //多列title和author可编辑
              v = Object.assign({}, v, { edit: { title: false, author: false }})
            return v
          })
          this.listLoading = false
        })
      }
    }

Answer 2

<el-table-column prop="number" scope="scope"></el-table-column>这个标签添加一个template标签，标签中包含一个input，一个div，这两个标签给一个变量绑定v-if和v-else确定显示其中的某一个，默认显示div，给div绑定点击事件，点击时，将v-if对应的变量改为true，显示input，隐藏div，依次类推。因为是每一行的数据要分开，所以记得每一行的展示隐藏的变量也是独立的