Elementui table 单元格可编辑

程序员文章站 2022-03-04 11:51:56

...

Elementui table 单元格可编辑

基本思想

在单元格中放input，然后设置border为0，当input focus时设置border为1

参考代码

<el-table :data="auditRule.params" border style="width: 100%">
    <el-table-column prop="paramName" label="标识" width="150">
                <template slot-scope="scope">
                  <input type="text" v-model="scope.row.paramName" class="cell-input"/>
                </template>
    </el-table-column>
</el-table>

$border-focus-color:#A7D5EC;
.cell-input{
  width: 100%;
  height: 100%;
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  &:focus{
    border: 1px solid $border-focus-color;
  }
}