Elementui table 单元格可编辑

最新推荐文章于 2024-09-25 00:06:20 发布

xu187

最新推荐文章于 2024-09-25 00:06:20 发布

阅读量4k

点赞数

分类专栏： vue #elementui 文章标签： vue elementui table table可编辑

本文链接：https://blog.csdn.net/xu187/article/details/102545260

版权

vue 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

#elementui

1 篇文章 0 订阅

订阅专栏

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;
  }
}