zoukankan      html  css  js  c++  java
  • vue elementui table 双击单元格实现编辑,聚焦,失去焦点,显示隐藏input和span

    <el-table :data="tableData"
    class="tb-edit"
    style=" 100%"
    ref="multipleTable"
    @selection-change="handleSelectionChange"
    highlight-current-row
    @cell-dblclick="dblhandleCurrentChange"
    >


    dblhandleCurrentChange(row, column, cell, event) {
    switch (column.label) {
    case "经度(°)":
    row.longitudeflag = true;
    break;
    case "纬度(°)":
    row.dimensionflag = true;
    break;
    case "距离(m)":
    row.heightflag = true;
    break;
    }
    },


    
    


    聚焦需要加如下代码在公用js里面:

    Vue.directive('focus', function (el, option) {
    var defClass = 'el-input', defTag = 'input';
    var value = option.value || true;
    if (typeof value === 'boolean')
    value = { cls: defClass, tag: defTag, foc: value };
    else
    value = { cls: value.cls || defClass, tag: value.tag || defTag, foc: value.foc || false };
    if (el.classList.contains(value.cls) && value.foc)
    el.getElementsByTagName(value.tag)[0].focus();
    });


    失去焦点方法:
    inputblur(row, event, column) {
    let tableD = this.tableData;
    tableD.forEach(function (item) {
    item.longitudeflag = false;
    item.dimensionflag = false;
    item.heightflag = false;
    });
    },

    转载于:https://www.cnblogs.com/yixiaoyang-/p/9771652.html

  • 相关阅读:
    blocksit.js插件瀑布流
    防止点浏览器返回按钮,返回上一页的JS方法
    jquery 换肤功能
    HTML5获取地理位置
    百度api定位
    网站如何做到完全不需要使用jQuery
    让网页变成灰色代码
    利用html标签限制搜索引擎对网站的抓取收录
    高清ICON SVG解决方案
    加载动画
  • 原文地址:https://www.cnblogs.com/twodog/p/12135795.html
Copyright © 2011-2022 走看看