elementui 表格鼠标点击单元格编辑，鼠标离开则保存

已于 2023-04-03 15:51:46 修改
阅读量828 收藏 1
点赞数
于 2021-09-06 10:42:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37469058/article/details/120129022
版权

elementui css html 
<template>
  <div class="app-container">
    <div class="box-card" ref="top" style="border-bottom: 1px solid #eee">
      <el-form :inline="true" size="mini" ref="form" :model="pageFilter">
        <el-form-item label="日期">
            <el-date-picker
                v-model="dateValue"
                type="date"
                size="small"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button round size="mini" icon="el-icon-search" @click="onSearch"
            >搜索</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            round
            size="mini"
            icon="el-icon-refresh-left"
            @click="onReset"
            >重置</el-button
          >
        </el-form-item>
        <el-form-item>
            <el-button round size="mini" icon="el-icon-setting" @click="setIndex()">设置指标</el-button>
        </el-form-item>
      </el-form>
    </div>
      <el-card class="box-card" style="margin-bottom: 15px" shadow="always">
          <el-table  style="width: 100%;margin-top: 8px;margin-bottom: 15px" v-loading="listLoading"  :height="tableHeight" :data="tableData" row-key="index" element-loading-text="拼命加载中" border fit highlight-current-row  >
              <template v-for="item in tablelist" :key>
                  <el-table-column
                      align="center"
                      show-overflow-tooltip
                      :width="120"
                      :label="item.label"
                  >
                      <template slot-scope="scope"><span :class="item.class ? item.class : scope.row.class">{{ scope.row[item.value] }}</span></template>
                  </el-table-column>
              </template>
          </el-table>
      </el-card>
      <el-dialog title="设置指标" :visible.sync="dialogTableVisible" :close-on-click-modal="false" @open="open">
          <el-table ref="myTable" :data="gridData" :cell-style="{ textAlign: 'center' }" :span-method="objectSpanMethod" :header-cell-style="{textAlign: 'center'}"  stripe border highlight-current-row @cell-mouse-leave="loseFcous">
              <el-table-column property="chargePerson" label="" width="150"></el-table-column>
              <el-table-column property="region" label="大区" width="150"></el-table-column>
              <el-table-column property="campus" label="校区" width="200"></el-table-column>
              <el-table-column property="dailyOperationIndex" label="日经营A指标">
                  <template slot-scope="scope">
                      <div @click.stop="changeNum(scope.$index,'editDailyOperationIndex')">
                          <el-input v-if="editable[scope.$index]" v-model="scope.row.dailyOperationIndex" size="mini" class="editDailyOperationIndex" @change="changeInput(scope.row)"/>
                          <span v-else>{{ scope.row.dailyOperationIndex?scope.row.dailyOperationIndex:0 }}</span>
                      </div>
                  </template>
              </el-table-column>
              <el-table-column property="monthlyMemberIndex" label="月会员指标">
                  <template slot-scope="scope">
                      <div @click.stop="changeNumMonthly(scope.$index,'editMonthlyMemberIndex')">
                          <el-input v-if="editableMonthly[scope.$index]" v-model="scope.row.monthlyMemberIndex" size="mini" class="editMonthlyMemberIndex" @change="changeInput(scope.row)"/>
                          <span v-else>{{ scope.row.monthlyMemberIndex?scope.row.monthlyMemberIndex:0 }}</span>
                      </div>
                  </template>
              </el-table-column>
          </el-table>
      </el-dialog>
    </div>
</template>

<script>
import { listSignTarget2,getSchoolsRelation, todaySign } from "@/api/report";
import { getRosterId } from "@/utils/auth";
export default {
  data() {
    return {
      dateValue: null,
      tableHeight: 300,
      listLoading: false,
      tableData: [],
      pageFilter: {
        loginId: getRosterId()
      },
      tablelist: [
        {
          value: "deptName",
          label: "网招部",
          class: "none",
        },
        {
          value: "rosterName",
          label: "总负责人",
          class: "none",
        },
        {
          value: "rosterName",
          label: "区域",
          class: "none",
        },
        {
          value: "rosterName",
          label: "校区",
          class: "none",
        },
        {
          value: "rosterName",
          label: "来校",
          class: "none",
        },
        {
          value: "rosterName",
          label: "当日报名",
          class: "none",
        },
        {
          value: "rosterName",
          label: "网汇",
          class: "none",
        },
        {
          value: "rosterName",
          label: "汇款人数",
          class: "none",
        },
        {
          value: "rosterName",
          label: "明天到校",
          class: "none",
        },
      ],
      top: "",
      dialogTableVisible:false,
        gridData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
        }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
        }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
        }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
        }],
        saveItem: {}, // 点击单元格可编辑
        editable: [], // 点击单元格可编辑
        editableMonthly: [], // 点击单元格可编辑
    };
  },
  mounted() {
    this.$nextTick((h) => {
      this.top = this.$refs.top.clientHeight + "px";
      this.tableHeight=window.innerHeight-200;
        window.onresize = () =>{
            this.tableHeight=window.innerHeight-200;
        }
    });
    this.loadData();
  },
  methods: {
      loseFcous() {
          this.editable = new Array(this.$refs.myTable.data.length);
          this.editable.forEach(value => value = false);
          this.editableMonthly = new Array(this.$refs.myTable.data.length);
          this.editableMonthly.forEach(value => value = false);
      },
      changeInput(val) {
          console.log(val)
          // this.$ajax.post('bom/upDateMemo ', this.saveItem
          // ).then((res) => {
          //     this.$message({ message: res.getMessage(), type: 'success' });
          // });
      },
      changeNum(index, className) {
          // 设置是否可以编辑
          this.editable = new Array(this.$refs.myTable.data.length);
          this.editable[index] = true;
          this.$set(this.editable, index, true);
          // 让input自动获取焦点
          this.$nextTick(function() {
              let editInputList = document.getElementsByClassName(className);
              editInputList[0].children[0].focus();
          });
      },
      changeNumMonthly(index, className) {
          // 设置是否可以编辑
          this.editableMonthly = new Array(this.$refs.myTable.data.length);
          this.editableMonthly[index] = true;
          this.$set(this.editableMonthly, index, true);
          // 让input自动获取焦点
          this.$nextTick(function() {
              let editInputList = document.getElementsByClassName(className);
              editInputList[0].children[0].focus();
          });
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
          if (columnIndex === 0) {
              return {
                  rowspan: row.rowspan,
                  colspan: 1
              }
          }
          if (columnIndex === 1) {
              return {
                  rowspan: row.rowspan1,
                  colspan: 1
              }
          }
      },
      open(){
          getSchoolsRelation().then((response) => {
              this.gridData = response.data;
              // 先给所有的数据都加一个v.rowspan = 1
              this.gridData.forEach(v => {
                  v.rowspan = 1;
                  v.rowspan1 = 1;
              })
              // 双层循环
              for (let i = 0; i < this.gridData.length; i++) {
                  // 内层循环，上面已经给所有的行都加了v.rowspan = 1
                  // 这里进行判断
                  // 如果当前行的id和下一行的id相等
                  // 就把当前v.rowspan + 1
                  // 下一行的v.rowspan - 1
                  for (let j = i + 1; j < this.gridData.length; j++) {
                      if (this.gridData[i].chargePerson === this.gridData[j].chargePerson) {
                          this.gridData[i].rowspan++
                          this.gridData[j].rowspan--
                      }
                  }
                  // 这里跳过已经重复的数据
                  i = i + this.gridData[i].rowspan - 1;
              }
              for (let i = 0; i < this.gridData.length; i++) {
                  // 内层循环，上面已经给所有的行都加了v.rowspan = 1
                  // 这里进行判断
                  // 如果当前行的id和下一行的id相等
                  // 就把当前v.rowspan + 1
                  // 下一行的v.rowspan - 1
                  for (let j = i + 1; j < this.gridData.length; j++) {
                      if (this.gridData[i].region === this.gridData[j].region) {
                          this.gridData[i].rowspan1++
                          this.gridData[j].rowspan1--
                      }
                  }
                  // 这里跳过已经重复的数据
                  i = i + this.gridData[i].rowspan1 - 1;
              }
          });
      },
      setIndex(){
        this.dialogTableVisible=true
      },
    /**
     * 查找
     */
    onSearch() {
      this.loadData();
    },
    /**
     * 重置
     */
    onReset() {
      this.dateValue = '';
      this.onSearch();
    },

    loadData() {
      this.listLoading = true;
      listSignTarget2(this.pageFilter).then((response) => {
        this.tableData = response.data.a;
        this.tableDatas = response.data.b;
        this.tableData.map((item) => {
          if (
            item.arriveTargetNum &&
            item.arriveCount &&
            item.arriveTargetNum < item.arriveCount
          ) {
            item.class = "reds";
          } else {
            item.class = "grue";
          }
        });
        this.tableDatas.map((item) => {
          if (
            item.arriveTargetNum &&
            item.arriveCount &&
            item.arriveTargetNum < item.arriveCount
          ) {
            item.class = "reds";
          } else {
            item.class = "grue";
          }
        });
        this.listLoading = false;
      });
    },
  },
};
</script>
<!--样式参考：https://www.cnblogs.com/goloving/p/9119460.html-->
<style lang="scss">
.el-table__header tr,
.el-table__header th {
    padding: 4px 0;
    height: 20px;
}
.el-table__body tr,
.el-table__body td {
    padding: 4px 0;
    height: 10px;
}
</style>

PLML
关注
element-ui 表格实现单元格可编辑的方法
zjw0742的博客
06-30 5万+
:data="tableData"     border     @cell-mouse-enter="handleMouseEnter"     @cell-mouse-leave="handleMouseOut"     style="width: 100%">           label="日期"       width="180">  
vue+element-ui实现表格编辑
热门推荐
liaoxuewu的博客
07-24 8万+
两种实现方式 1、表格内部显示和编辑切换 这种方式就是利用两个标签显示隐藏来实现，我们这里用input和span，正常用span将数据显示，点击编辑时，将span隐藏，显示input进行编辑。选中当前行我们可以通过slot-scope中的index去实现，在控制显示隐藏的属性上绑定index就可以选中当前行了，如showEdit[index]。 html中的代码： &amp;amp;amp;amp;amp;amp;lt;el...
vue+elementui实现点击table中的单元格触发事件--弹框
10-15
主要介绍了vue+elementui实现点击table中的单元格触发事件--弹框，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element-ui表格组件，可进行编辑当前这一行并进行保存.计算
piaocanY的博客
03-26 768
} }
element+vue 之Table里的编辑保存取消操作
Jasmin博客
02-15 1725
<template> <div class="page-container "> <el-card class="box-card"> <div class="title-wrapper"> <breadcrumb></breadcrumb> <span class="pushButton"> <el-button type="primar.
【技巧】实现饿了么Element UI的table单击（点击）编辑单元格内容
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
10-24 9084
【代码】【技巧】实现饿了么Element UI的table单击（点击）编辑单元格内容。
vue2中使用el-table实现直接编辑表格，鼠标点击空白处实现保存并传递给后端的简单方法
最新发布
Chen__FY的博客
12-07 3630
需求实现如下：点击某个单元格实现整行数据高亮，并且可以修改，修改完成后鼠标点击空白处，实现保存修改后的整行数据并传递给后端。，当不点击单元格时显示值，点击单元格时显示编辑框，用。，意思就是选中某个数据行时,高亮该行。3. 在el-input中。1.首先我们需要用到。
elementui表格右键菜单例子.vue
04-08
elementui表格上右键单击弹出菜单项，点击菜单调用后续方法
vue+elementUI实现点击表格中某一个单元格进行复制其内容
weixin_42461079的博客
01-05 2731
vue+elementUI实现点击表格中某一个单元格进行复制其内容 在下面案例中复制的是链接这一列 1.安装插件vue-clipboard2 npm install vue-clipboard2 --save 2.在main.js中引入 import Vue from ‘vue’ import VueClipboard from ‘vue-clipboard2’ Vue.use( VueClipboard ) 3.在页面中使用 在template中： <el-table-column label
vue+element解决 table点击操作按钮（如编辑/详情 ）在编辑/详情页面关闭/保存后返回table当前页
qq_38904099的博客
07-29 4206
思路：将当前页的页码nowPage存入localStroage/session，然后点击编辑/详情跳转到编辑/详情页面，然后，再次返回当前页的时候，在created生命周期里，获取到存储的nowPage，再进行加载 这里要借助vue中独有的守卫钩子函数 beforeRouteEnter（在路由跳转前加载数据）还有beforeRouteEnter beforeRouteUpdate、befo...
element表格 el-table双击单元格修改数据 鼠标离开焦点提交参数确定
weixin_48305373的博客
12-05 1560
el-table双击编辑失去焦点确定 @cell-dblclick有四个参数 我表格是动态渲染的不是写死的，所以调接口传参数会有不一样
element-table表格实现点击可编辑，失去焦点自动保存编辑的信息
普通前端一枚
05-17 1331
element-table表格实现点击可编辑，失去焦点自动保存编辑的信息。
el-table实现行内编辑功能
飞翔的小白
10-21 1万+
远离其实很简单：就是在获取table数据后，对数组进行遍历，每一个都添加上一个show属性，并赋值为false， 然后在每个el-table-column中进行判断： 原理就是这样，其他的控件比如：选择框、时间框、数字选择框等等吧，都可以适用。 <el-table-column prop="name" label="地址"> <template scope="scope"> // 如果show=true的话，就显示el-input
Element的@mouseleave事件不执行
公z号：职场爱学习
06-23 932
elementUI把@mouseenter禁止了，需要加上.native。 <el-button class=“linkWayBtn” @mouseenter=“showWin = true” @mouseleave=“showWin = false”> 联系方式 改成
el-table 简单的行内编辑，单行可编辑
Jihn46的博客
06-16 7089
el-table 简单的行内编辑，单行新增修改删除，单行可编辑
Vue2 项目里，使用 Element 的 dialog 里嵌套 tabs，导致关闭 dialog 时浏览器卡死问题
08-30 1806
Vue2 项目里，使用 Element 的 dialog 里嵌套 tabs，导致关闭 dialog 时浏览器卡死问题 解决办法： 给 tab 添加 v-if ，绑定 dialog 的 visible.sync <el-dialog :visible.sync="linkSelecterShow"> <el-tabs v-model="activeName" :visible.sync="linkSelecterShow"> <el-tab-pane label="用
左右移动数据vue+elementui
weixin_48289449的博客
09-05 2352
功能：将两个表格中的数据进行移动，针对内容较多的表格+上下移动的功能。
Element-UI中，按钮点击后松开鼠标颜色仍然聚焦的解决方法（纯css整体解决）
u014288878的博客
08-02 1324
在使用element-ui的过程中，发现按钮点击后存在聚焦问题，即点击后移开鼠标，按钮颜色不变回原来的样式，而是会加上一个:focus的偏暗的样式，只有在别处点击一下，才会清除效果，让我极为难受。
【ElementUI组件刨析】Tabs组件：使用el-table实现鼠标经过某一行时隐藏或者显示按钮
io_123io_123的博客
03-16 2999
使用el-table实现鼠标经过某一行时隐藏或者显示按钮
elementui可编辑单元格_ElementUI 表格可编辑单元格
05-25
ElementUI的表格组件中，可以通过设置 `:editable="true"` 来开启单元格的可编辑模式。当单元格进入编辑模式时，会显示一个输入框，用户可以在输入框中修改单元格内容。用户完成编辑后，可以通过点击外部区域或按下回车键来结束编辑模式。 以下是一个使用 ElementUI 表格的可编辑单元格示例代码： ```html <template> <div> <el-table :data="tableData" :editable="true"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20, gender: '男' }, { name: '李四', age: 22, gender: '女' }, { name: '王五', age: 25, gender: '男' } ] } } } </script> ``` 在上面的示例中，我们设置了 `:editable="true"`，开启了表格的可编辑模式。同时，每个表格列设置了 `prop` 属性，表示该列对应数据的属性名。这样，当单元格进入编辑模式时，会自动将该单元格对应的数据项的属性值更新为用户输入的内容。 另外，如果需要在用户完成编辑后触发回调函数进行处理，可以使用 `@cell-edit-done` 事件来监听单元格编辑完成事件，例如： ```html <el-table @cell-edit-done="handleCellEditDone"> <!-- 表格列定义 --> </el-table> ``` ```javascript methods: { handleCellEditDone(row, column, cell, event) { console.log('编辑完成，新值为：', row[column.property]) } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值