饿了么 ui table 编辑 删除

1 ！ 2！ 3！ pong~~~

先看笑果

el-table.gif

不多bibi， 上代码

<el-table
  style="width: 100%"
  border
  :data="copyData"
  stripe
  @cell-dblclick="dblhandleCurrentChange"
  @cell-click="currentChange"
  :highlight-current-row="true"
>
  <el-table-column
    v-for="(item,index) in tableHead"
    :prop="item.column_name"
    :label="item.column_comment"
    :key="index"
  >
    <template slot-scope="scope">
      <!-- <span>{{ scope.row.isEdit }}</span> -->
      <span v-if="scope.row.isEdit && currentTableId === scope.row.index">
        <el-input v-model="scope.row[item.column_name]" size="mini" placeholder="请输入内容"></el-input>
      </span>
      <span v-else>{{ scope.row[item.column_name] }}</span>
    </template>
  </el-table-column>
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-button  // 编辑 和 确认
        :type="scope.row.isEdit &&  currentTableId === scope.row.index ? 'success' :'primary'"
        :icon="scope.row.isEdit &&  currentTableId === scope.row.index ? 'el-icon-check' :'el-icon-edit'"
        circle
        @click="(e) => (handleEdit(scope.$index, scope.row,scope.row.isEdit,e))"
      ></el-button>
      <el-button  //  取消编辑
        v-show="scope.row.isEdit &&  currentTableId === scope.row.index"
        type="danger"
        icon="el-icon-close"
        circle
        @click="(e) => cacle(scope.$index, scope.row,scope.row.isEdit,e)"
      ></el-button>
      <el-button  // 删除
        v-if="operation === 1 "
        v-show="!scope.row.isEdit ||  currentTableId != scope.row.index"
        icon="el-icon-delete"
        circle
        type="danger"
        @click="(e) => handleDelete(scope.$index, scope.row,scope.row.isEdit,e)"
      ></el-button>
    </template>
  </el-table-column>
</el-table>

然后再看一哈数据合适

        tableHead: [
          {
            column_name: "stage_name",
            column_comment: "阶段名称"
          },
          {
            column_name: "staring_height",
            column_comment: "持续时间(min)"
          },
          {
            column_name: "end_height",
            column_comment: "开始温度(°C)"
          },
          {
            column_name: "duration",
            column_comment: "结束温度(°C)"
          }
        ],
    
        tableData: [
          {
            stage_name: "新任务1",
            staring_height: "1 ",
            end_height: "1",
            isEdit: false,
            duration: "1",
            index:0
    
          },
        ]

  欢迎指教，感谢打扰  bye ! ! ! !

有问题邮箱聊 2838370086@qq.com