Element-UI table 单元格数据可编辑

Element-UI table 单元格数据可编辑

// template代码
<el-table v-loading="loading" :data="tabels" @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="55" align="center" />
  <el-table-column label="表名" prop="name" width="120" align="center"/>
  <el-table-column label="表解释" width="200" align="center">
    <template slot-scope="scope">
      <el-input 
      placeholder="请输入内容" 
      v-model="scope.row.remark" 
      :disabled="scope.row.update == 0?true:false" 
      style="width:75%"
      ></el-input>
      <i 
      class="el-icon-edit-outline" 
      style="margin-left:10px" 
      v-if="scope.row.update == 0" 
      @click="scope.row.update = 1"
      ></i>
      <i 
      class="el-icon-check" 
      style="margin-left:10px" 
      v-else 
      @click="updateRemark(scope.row)"
      ></i>
    </template>
  </el-table-column>
</el-table-column>

// script代码
<script>
import { getTableList,updateRemark } from "@/api/table";

export default {
  name: "Role",
  dicts: ['sys_normal_disable'],
  data() {
    return {
      tabels: [],
      // 遮罩层
      loading: true,
    };
  },
  created() {
    this.getList();
  },
  methods: {
  // 更新表中数据
    updateRemark(rows){
      console.log(rows)
      updateRemark({id:rows.id,remark:rows.remark}).then(
        res=>{
          console.log(res)
          // 修改update状态为不可编辑
          rows.update = 0
        }
      );
    },
    handleClick(rows){
      console.log(rows) 
    },
    // 获取表格数据
    getList(){
      getTableList().then(
        res=>{
          // 为每条数据加上update来控制是否编辑
          // update为0是，不可编辑，为1时，可编辑
          res.rows.forEach(item =>{
            item.update = 0
          })
          this.tabels = res.rows
          this.loading = false
        }
      );
    },
    // 选择器
    handleSelectionChange(e){
      console.log(e)
    }
  }
}