vue+Element-table单元格编辑

最新推荐文章于 2024-11-26 16:59:32 发布

shuaijie0518

最新推荐文章于 2024-11-26 16:59:32 发布

阅读量516

点赞数

分类专栏： vue element 文章标签： vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/taoqidexiaojie/article/details/128615345

版权

vue 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

element

8 篇文章 0 订阅

订阅专栏

通过监听Table组件的cell-click事件，动态管理当前激活单元格的样式，实现表格的编辑模式。当单元格被点击时，清空所有current-cell类，将当前单元格设置为可编辑，使用input标签替换内容并显示，失去焦点后恢复显示文本。CSS样式控制输入框的显示和隐藏，以实现编辑和查看状态的切换。

摘要由CSDN通过智能技术生成

思路：

利用Table组件的cell-click方法，获得当前点击的单元格。

清空所有的名为current-cell的class属性。

为当前获取的单元格Dom动态添加名为current-cell的class属性。

控制单元格的input标签的显示隐藏就能实现表格的编辑功能。

<div class="table">        
    <el-table
      :data="tableData"
      border
      @cell-click="cellClick">
        <el-table-column
        header-align="center"
        align="center"
        label="备注">
            <template slot-scope="scope">
              <el-input
                size="small"
                ref="tableInput"
                v-model="scope.row.remark"
                @blur="removeClass(scope.row.remark, scope.$index, scope.row)"
              ></el-input>
              <span>{{ scope.row.remark }}</span>
            </template>
      </el-table-column>
    </el-table>
</div>

在methods中的方法：

    cellClick(row, column, cell, event) {
      for(let i=0;i<document.getElementsByClassName('current-cell').length;i++){
        document.getElementsByClassName('current-cell')[i].classList.remove('current-cell');
      }
      cell.classList.add("current-cell");
    },
    removeClass(data, index, row){
      document.getElementsByClassName('current-cell')[0].classList.remove('current-cell');
    }

在css中的代码（这个必须添加）

.table .el-input {
  display: none;
}
.current-cell .el-input {
  display: block;
}
.current-cell .el-input + span {
  display: none;
}

这个是输入框，照个这个也可以弄成下拉框，单选按钮等。