如何巧用Vue.extend继承组件实现el-table双击可编辑(不使用v-if、v-else)

目录
  • 问题描述
  • 效果图
  • 代码思路
  • 代码思路中的三个问题解答
    • 问题一:如何创建一个el-input标签?
    • 问题二三:el-input标签和span标签的来回替换恢复
  • 完整代码
    • 目录结构
    • 用于继承的el-input组件
    • 用于继承的span组件
    • 统一继承并暴露data.js文件
    • 使用继承的three.vue组件
  • 总结

问题描述

有一个简单的表格,产品要求实现双击可编辑

看了一下网上的帖子,大多数都是搞两部分dom,一块是输入框,用于编辑状态填写;另一块是普通标签,用于在不编辑显示状态下呈现单元格文字内容。再加上一个flag标识搭配v-if和v-else去控制编辑状态、还是显示状态。大致代码如下:

  <el-table-column
    align="center"
    label="姓名"
  >
    <template slot-scope="scope">
      <!--isClick就是标识状态,状态处于编辑时候,显示输入框,状态属于呈现状态就显示文本内容-->
      <el-input v-if="scope.row.isClick" v-model="scope.row.name"  @blur="blurFn(scope.row)"></el-input>
      <span @click="clickCell(scope.row)" v-else>{{scope.row.name}}</span>
    </template>
  </el-table-column>

这种方式有其适用场景,但是得每个el-table-column列中都加上el-input和span以及v-if和v-else。我们尝试一下动态添加el-input,就是点击那个单元格,给那个单元格添加el-input让其处于可编辑状态,然后适时移除即可。这样的话,很多列的时候,就不用加很多个v-if和v-else啦。我们先看一下效果图

效果图

代码思路

  • 第1步:给el-table绑定双击事件 @cell-dblclick='dblclick',再双击事件的回调函数中,可以得知点击的是哪一行、那一列、那个单元格dom,以及点击事件。dblclick(row, column, cell, event) {...},这个是饿了么官方提供的,没啥好说的
  • 第2步:重点来喽
    • 第2.1步:单元格双击事件以后,我们首先创建一个el-input标签,然后把点击的这个单元格的值,作为参数props让这个el-input接收,这样的话el-input就会显示这个单元格的值了,就可以编辑了。问题一:如何创建一个el-input标签? ,客官稍等,下方会解答
    • 第2.2步:把创建好的el-input标签替换掉原来的单元格span标签,这样的话,就可以看到单元格变成了可输入的输入框了。问题二:如何把新创建的el-input标签,替换原有的span标签 ,客官稍等,下方会解答
    • 第2.3步,当用户编辑完了点击别处时候,即输入框失去焦点的时候,再把el-input输入框标签移除掉,恢复默认的span标签(当然失去焦点的时候,就要发请求修改数据了)问题三:如何移除el-input标签,并恢复原有的span标签,客官稍等,下方会解答
  • 这样的话,每次双击搞一个input标签用于修改,每次改完了失去焦点,就恢复默认单元格展示状态了,功能就实现了

代码思路中的三个问题解答

问题一:如何创建一个el-input标签?

我们知道,如果是创建原生的input标签并指定一个值,比较简单,直接:

let input = document.createElement('input') // 创建一个input标签
input.value = '孙悟空' // 给input标签赋值
document.body.appendChild(input) // 把input标签追加到文档body中

不过el-input标签不能通过上述方式创建,因为document.createElement()方法虽然可以创建出来el-input标签,但是dom并不认识这个el-input标签,所以页面没有变化。毕竟饿了么的el-input也是把input标签做一个二次封装的

所以,这里我们可以使用Vue.extend()方法去继承一个组件并暴露出去,而继承的这个组件中又有一个input标签,所以那个需要使用,那里就可以引入并new出来一个el-input了。关于Vue.extend()的定义啥的,这里不赘述,详情看官方文档。笔者之前也写过一篇Vue.extend文章,传送门:https://www.jb51.net/article/251484.htm

首先搞一个.vue文件,用于继承

// input.vue文件
<template>
  <div class="cell">
    <el-input
      ref="elInputRef"
      size="mini"
      v-model.trim="cellValue"
    ></el-input>
  </div>
</template>

props: {
    cellValue: {
      type: String | Number,
      default: "",
    },
}

然后定义一个data.js文件,继承input.vue文件,并暴露

// data.js
import Vue from "vue";
import definedInput from "./input.vue";
// vue继承这个input组件,就相当于一个构造函数了
const inputC = Vue.extend(definedInput);
// 暴露出去,哪里需要哪里引入
export default {
    inputC,
}

页面中引入并使用

// page.vue
import extendComponents from "./threeC/data"; // 1. 引入

new extendComponents.inputC({ // 2. 实例化
    propsData: {
      // 使用propsData对象传递参数,子组件在props中可以接收到
      cellValue: cellValue, // 传递单元格的值
    },
  }).$mount(cell.children[0]);// 3. 挂载

propsData对象用于给继承的组件传递参数,也可以传递一个函数,从而继承组件通过这个函数通知外部使用组件,详情见后续完整代码

问题二三:el-input标签和span标签的来回替换恢复

使用$mount方法去做来回替换,$mount可以把一个子dom元素追加到父dom元素内部,相当于appendChild

然后这里需要有一个替换的时机,就是实例化的组件中的el-input失去焦点的时候,去通知外部使用的组件,所以可以在外部使用是,在propsData中传递一个函数到继承的组件,如:

// 外部组件传递
new extendComponents.inputC({
    propsData: {
      cellValue: cellValue, // 传递单元格的值
      saveRowData: this.saveRowData, // 传递回调函数用于通知,继承组件中可以触发之
    },
}).$mount(cell.children[0]); 

saveRowData(params){
    console.log('收到继承组件消息通知啦参数为:',params)
}
// 内部组件失去焦点时候通知
<el-input
  ref="elInputRef"
  size="mini"
  v-model.trim="cellValue"
  @blur="blurFn"
></el-input>

props: {
    cellValue: {
      type: String | Number,
      default: "",
    },
    saveRowData: Function, // 外部,传递进来一个函数,当这个el-input失去焦点的时候,通过此函数通知外部
}

blurFn() {
  // 失去焦点,再抛出去,通知外部
  this.saveRowData({
    cellValue: this.cellValue,
    // 其他参数
  });
},

所以当内层失去焦点的时候,就可以通知外层去做一个替换了,就是把单元格dom重新做一个$mount挂载,就把el-input替换成了span了,为了进一步理解,这里的span我们也可以使用继承的方式,是new实例化使用,详情见下方完整代码

完整代码

目录结构

threeC
-- data.js
-- input.vue
-- span.vue
three.vue

用于继承的el-input组件

input.vue

<template>
  <div class="cell">
    <el-input
      ref="elInputRef"
      size="mini"
      v-model.trim="cellValue"
      @blur="blurFn"
    ></el-input>
  </div>
</template>

<script>
export default {
  props: {
    cellValue: {
      type: String | Number,
      default: "",
    },
    saveRowData: Function, // 外部,传递进来一个函数,当这个el-input失去焦点的时候,通过此函数通知外部
    cellDom: Node, // 单元格dom
    row: Object, // 单元格所在行数据
    property: String, // 单元格的key
  },
  mounted() {
    // 用户双击后,让其处于获取焦点的状态
    this.$refs.elInputRef.focus();
  },
  methods: {
    blurFn() {
      // 失去焦点,再抛出去,通知外部
      this.saveRowData({
        cellValue: this.cellValue,
        cellDom: this.cellDom,
        row: this.row,
        property: this.property,
      });
    },
  },
};
</script>

<style>
.cell {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0 8px;
}
</style>

用于继承的span组件

span.vue

<template>
  <span class="cell">{{ cellValue }}</span>
</template>

<script>
export default {
  props: {
    cellValue: {
      type: String | Number,
      default: "",
    },
  },
};
</script>

统一继承并暴露data.js文件

import Vue from "vue";
import definedInput from "./input.vue";
import definedSpan from "./span.vue";

const inputC = Vue.extend(definedInput);
const spanC = Vue.extend(definedSpan);

export default {
    inputC,
    spanC,
}

使用继承的three.vue组件

<template>
  <div id="app">
    <el-table
      @cell-dblclick="dblclick"
      :cell-class-name="cellClassName"
      height="480"
      :data="tableData"
      border
    >
      <el-table-column align="center" type="index" label="序号" width="50">
      </el-table-column>
      <el-table-column align="center" prop="name" label="姓名" width="100">
      </el-table-column>
      <el-table-column align="center" prop="age" label="年龄" width="100">
      </el-table-column>
      <el-table-column align="center" prop="home" label="家乡">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// 引入继承组件对象,可取其身上的inputC构造函数、或spanC构造函数生成组件dom
import extendComponents from "./threeC/data";
export default {
  data() {
    return {
      tableData: [
        {
          name: "孙悟空",
          age: 500,
          home: "花果山水帘洞",
        },
        {
          name: "猪八戒",
          age: 88,
          home: "高老庄",
        },
        {
          name: "沙和尚",
          age: 1000,
          home: "通天河",
        },
      ],
      /**
       * 存一份旧的值,用于校验是否发生变化,是否修改
       * */
      oldCellValue: null,
    };
  },
  methods: {
    cellClassName({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex; // 自定义指定一个索引,下方能够用到
    },
    dblclick(row, column, cell, event) {
      // 1. 序号列单元格不允许编辑,别的列单元格可以编辑
      if (column.label == "序号") {
        this.$message({
          type: "warning",
          message: "序号列不允许编辑",
        });
        return;
      }
      // 2. 存一份旧的单元格的值
      this.oldCellValue = row[column.property];
      // 3. 然后把单元格的值,作为参数传递给实例化的input组件
      let cellValue = row[column.property];
      // 4. 实例化组件以后,带着参数,再挂载到对应位置
      new extendComponents.inputC({
        propsData: {
          // 使用propsData对象传递参数,子组件在props中可以接收到
          cellValue: cellValue, // 传递单元格的值
          saveRowData: this.saveRowData, // 传递回调函数用于保存行数据,组件中可以触发之
          cellDom: cell, // 传递这个dom元素
          row: row, // 传递双击的行的数据
          property: column.property, // 传递双击的是哪个字段
        },
      }).$mount(cell.children[0]); // 5. $mount方法,用于将某个dom挂载到某个dom上
    },
    /**
     * 失去焦点的时候有以下操作
     *    1. 校验新值是否等于原有值,若等于,说明用户未修改,就不发请求。若不等于就发请求,然后更新tableData数据
     *    2. 然后使用$mount方法,挂载一个新的span标签dom在页面上,即恢复原样,而span标签也是实例化的哦
     * */
    saveRowData(params) {
      console.log("继承的子组件传递过来的数据", params);
      // 1. 看看用户是否修改了
      if (params.cellValue == this.oldCellValue) {
        console.log("未修改数据,不用发请求");
      } else {
        params.row[params.property] = params.cellValue;
        // 这里模拟一下发了请求,得到最新表体数据以后,更新tableData
        setTimeout(() => {
          //        给那个数组的     第几项            修改为什么值
          this.$set(this.tableData, params.row.index, params.row);
        }, 300);
      }
      // 2. 恢复dom节点成为原来的样子,有下面两种方式

      /**
       * 方式一:使用官方推荐的$mount去挂载到某个节点上,上方也是
       * */
      new extendComponents.spanC({
        propsData: {
          cellValue: params.cellValue,
        },
      }).$mount(params.cellDom.children[0]);

      /**
       * 方式二:使用原生js去清空原节点内容,同时再添加子元素
       * */
      // let span = document.createElement("span"); // 创建一个span标签
      // span.innerHTML = params.cellValue; // 指定span标签的内容的值
      // span.classList.add("cell"); // 给span标签添加class为cell
      // params.cellDom.innerHTML = ""; // 清空刚操作的input标签的内容
      // params.cellDom.appendChild(span); // 再把span标签给追加上去,恢复原样
    },
  },
};
</script>

<style lang="less" scoped>
#app {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 50px;
}
</style>

总结

使用Vue.extend()方法,可以继承一些组件,甚至继承一些复杂的组件,在实际业务场景中会有巧妙的使用。具体业务场景具体分析。

此外,上述代码中是el-input的继承,其实,我们也可以做el-select的继承,思路和上方类似,这样就可以在表格中双击单元格,选择并更改对应的下拉框更改el-table的单元值了,比如如果有性别这一列,那是下拉框的形式的。道友们可以按照这个思路发散哦...

到此这篇关于如何巧用Vue.extend继承组件实现el-table双击可编辑(不使用v-if、v-else)的文章就介绍到这了,更多相关Vue.extend实现el-table双击可编辑内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue组件教程之Toast(Vue.extend 方式)详解

    一.效果图 二.说明 这类提示框组件我们通常都会直接在 JS 代码中进行调用.像下面这样: this.$toast('别点啦,到头啦!') 但看到网上大多数还是通过 component 方式实现的,这样的话我们在使用的时候还要在 DOM 中放置一个组件元素,然后通过一个变量来控制它的显示隐藏,这样使用起来非常的不方便.那么有什么方法可以不用在 DOM 中手动放置组件元素就可以直接调用呢?答案就是 Vue.extend.通过 Vue.extend 方式实现的组件,需要两个文件,一个是 .vue 文

  • vue el-table实现行内编辑功能

    最近做一个vue前后端分离的项目,前端框架用element ui,在 使用 el-table 的过程中,需要实现行内编辑,效果大概是这样: 分为下面几个步骤: (1) 自定义 el-table 的表头(即添加 "新增" 按钮): <el-table :data="propTableData.col.filter(data => handleAdd || data.name.toLowerCase().includes(handleAdd.toLowerCase()

  • vue el-table实现自定义表头

    本文实例为大家分享了vue el-table实现自定义表头的具体代码,供大家参考,具体内容如下 el-table可以通过设置 Scoped slot 来实现自定义表头. 文档说明如下: 代码实现: <template> <el-dialog width="50%" :visible.sync="isShow" :before-close="beforeClose" title="自定义设备类型属性">

  • 如何巧用Vue.extend继承组件实现el-table双击可编辑(不使用v-if、v-else)

    目录 问题描述 效果图 代码思路 代码思路中的三个问题解答 问题一:如何创建一个el-input标签? 问题二三:el-input标签和span标签的来回替换恢复 完整代码 目录结构 用于继承的el-input组件 用于继承的span组件 统一继承并暴露data.js文件 使用继承的three.vue组件 总结 问题描述 有一个简单的表格,产品要求实现双击可编辑 看了一下网上的帖子,大多数都是搞两部分dom,一块是输入框,用于编辑状态填写:另一块是普通标签,用于在不编辑显示状态下呈现单元格文字内

  • Vue.extend实现组件库message组件示例详解

    目录 概述 Vue.extend message 组件配置对象(就是.vue文件) message 生成组件的函数 使用方法 效果图 总结 概述 当我们使用组件库的时候,某些组件并不是直接放到模板当中进行使用,而是通过api的方式调用生成组件并且挂在到我们的页面中,其中最常见的就是message组件,我们在组件库中看到的多数都是api调用的方式生成.记录自己基本实现message组件. Vue.extend 在vue中,要实现通过api方式实现组件的使用,这个aip是必不可少的,因此我们先了解下

  • vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码

    具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"></script> <style> </styl

  • vue.extend实现alert模态框弹窗组件

    本文通过Vue.extend创建组件构造器的方法写弹窗组件,供大家参考,具体内容如下 alert.js文件代码 import Vue from 'vue' // 创建组件构造器 const alertHonor = Vue.extend(require('./alert.vue')); var currentMsg = {callback:function(){ }} export default function(options){ var alertComponent = new alert

  • Vue如何实现组件的源码解析

    官网上关于组件继承分为两大类,全局组件和局部组件.无论哪种方式,最核心的是创建组件,然后根据场景不同注册组件. 有一点要牢记,"Vue.js 组件其实都是被扩展的 Vue 实例"! 1. 全局组件 // 方式一 var MyComponent = Vue.extend({ name: 'my-component', template: '<div>A custom component!</div>' }); Vue.component('my-component

  • 用Vue.extend构建消息提示组件的方法实例

    前提 前段时间自己做的vue练手项目,需要一个通用的消息提示组件,但是消息提示这种组件我更想用方法来调用,而不是在各个页面上都添加个组件(那样感觉很麻烦,重度懒癌患者),于是就上网差查了查,并研究了ElementUI的message源码.自己弄出来一个简陋的消息提示组件 Vue.extend是什么 按照官方文档说法,他是一个类构造器,用来创建一个子类vue并返回构造函数,而Vue.component它的任务是将给定的构造函数与字符串ID相关联,以便Vue.js可以在模板中接收它. 了解了这点之后

  • Vue.extend 编程式插入组件的实现

    前言 日常中我们要使用一个弹框组件的方式通常是先通过Vue.component 全局或是 component 局部注册后,然后在模版中使用.接下来我们尝试编程式的使用组件. 实现 其实步骤很简单 通过 Vue.extend() 创建构造器 通过 Vue.$mount() 挂载到目标元素上 目标实现一个 alert 弹框,确认和取消功能如下图 document.createElement 其实想要插入一个元素,通过 document.createElement 就可以实现,并非一定需要上面两步,但

  • vue extend+promise封装全局弹窗组件

    本文实例为大家分享了vue + element ui实现锚点定位的具体代码,供大家参考,具体内容如下 因为项目没有引入第三方UI库,所以所有的公共组件都需要自己封装现在需要一个全局的弹窗,要有promise异步处理 实现后的效果 // components/confirm文件 <template>   <div class="popup-wrap" v-if="showPopup">     <div class="popup

  • vue extend+promise封装全局弹窗组件

    本文实例为大家分享了vue extend+promise封装全局弹窗组件的具体代码,供大家参考,具体内容如下 因为项目没有引入第三方UI库,所以所有的公共组件都需要自己封装现在需要一个全局的弹窗,要有promise异步处理 实现后的效果 // components/confirm文件 <template>   <div class="popup-wrap" v-if="showPopup">     <div class="p

随机推荐