el-table 可编辑列表

一、需求：
1、列表前两列的表头，可以进行点击
2、列表非前两列的表格项中，点击编辑图标可以进行编辑
3、列表非前两列的表格项中，编辑文本失去焦点，变为不可编辑状态

二、实现
1、html

<el-table :data="list1">

      <el-table-column prop="name" align="center">
        <template slot="header" slot-scope="scope">
          <el-button @click="clickColumn1(scope.column, scope.$index)">可点击触发事件--列1</el-button>
        </template>
        <template slot-scope="scope">{{scope.row.name}}</template>
      </el-table-column>
      
      <el-table-column prop="age" align="center">
        <template slot="header" slot-scope="scope">
          <el-button @click="clickColumn2(scope.column, scope.$index)">可点击触发事件--列2</el-button>
        </template>
        <template slot-scope="scope">{{scope.row.age}}</template>
      </el-table-column>
      
      <el-table-column label="可编辑信息1" width="300" prop="remark" align="center">
        <template slot-scope="scope">
          <div style="display: flex; align-items: center">
            <el-input v-model="scope.row.remark1" :disabled="!scope.row.edit" @blur="blurColumn(scope.row, scope.$index)"></el-input>
            <span class="el-icon-edit" style="margin-left: 10px;" @click="editColumn(scope.row, scope.$index)"></span>
          </div>
        </template>
      </el-table-column>
      
      <el-table-column label="可编辑信息2" width="300" prop="remark" align="center">
        <template slot-scope="scope">
          <div style="display: flex; align-items: center">
            <el-input v-model="scope.row.remark2" :disabled="!scope.row.edit" @blur="blurColumn(scope.row, scope.$index)"></el-input>
            <span class="el-icon-edit" style="margin-left: 10px;" @click="editColumn(scope.row, scope.$index)"></span>
          </div>
        </template>
      </el-table-column>
      
      <el-table-column label="可编辑信息3" width="300" prop="remark" align="center">
        <template slot-scope="scope">
          <div style="display: flex; align-items: center">
            <el-input v-model="scope.row.remark3" :disabled="!scope.row.edit" @blur="blurColumn(scope.row, scope.$index)"></el-input>
            <span class="el-icon-edit" style="margin-left: 10px;" @click="editColumn(scope.row, scope.$index)"></span>
          </div>
        </template>
      </el-table-column>
      
      <el-table-column label="可编辑信息4" width="300" prop="remark" align="center">
        <template slot-scope="scope">
          <div style="display: flex; align-items: center">
            <el-input v-model="scope.row.remark4" :disabled="!scope.row.edit" @blur="blurColumn(scope.row, scope.$index)"></el-input>
            <span class="el-icon-edit" style="margin-left: 10px;" @click="editColumn(scope.row, scope.$index)"></span>
          </div>
        </template>
      </el-table-column>

</el-table>

2、js

export default{
	data(){
		return {
			 list1:[
				        {
				           name: 'bob',
				           age: 11,
				           remark1: 'remark1',
				           remark2: 'remark2',
				           remark3: 'remark3',
				           remark4: 'remark4',
				           edit: false
				         },
				         {
				           name: 'mary',
				           age: 22,
				           remark1: 'remark1',
				           remark2: 'remark2',
				           remark3: 'remark3',
				           remark4: 'remark4',
				           edit: false
				         },
			],
		}
	},
	methods: {
		// 可点击触发事件--列1
	     clickColumn1(column, index){
	        console.log(column);
	        console.log(index);
	        console.log(111);
	      },
	      // 可点击触发事件--列2
	      clickColumn2(column, index){
	        console.log(column);
	        console.log(index);
	        console.log(222);
	      },
	      // 编辑 column
	      editColumn(row, index){
	        console.log('editColumn');
	        this.$set(this.list1[index], 'edit', true)
	      },
	      // 取消编辑 column
	      blurColumn(row, index){
	        console.log('blurColumn');
	        this.$set(this.list1[index], 'edit', false)
	      },
	}
}

三、效果