vue+element-ui+slot-scope实现可编辑表格

1.咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架。 2.可编辑表格在后台管理系统还是比较常用的,因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法,下面我简单说哈我的两种方法: 3.方法一: 直接通过element的table组件中的cell-click和cell-dbclick监听表格事件,回调函数有四个参数row, column, cell, event,可以拿这些参数做相应的筛选,然后使用操作dom的方法添加input达到更改值的作用,贴上原生代码:

tableDbEdit(row, column, cell, event) {
      console.log(row, column, cell, event);
      if (column.label != "顺序") {
        event.target.innerHTML = "";
        let cellInput = document.createElement("input");
        cellInput.value = "";
        cellInput.setAttribute("type", "text");
        cellInput.style.width = "80%";
        cell.appendChild(cellInput);
        cellInput.onblur = function() {
          cell.removeChild(cellInput);
          event.target.innerHTML = cellInput.value;
        };
    }
 }

这个方法确实可以实现功能,谁让原生js功能强大的。 4.方法二: <1.>在element的table组件中使用slot-scope(作用域插槽)来实现该需求,slot-scope可能有些人有点陌生,这里贴上官网的链接https://cn.vuejs.org/v2/guide...,里面很详细

<el-table :data="addPlanRoute" border style="width:100%" @cell-dblclick="tableDbEdit">
   <el-table-column property="order1" label="顺序"></el-table-column>
   <el-table-column property="order2" label="装车点">
       <template slot-scope="scope">
           <el-input v-model="scope.row.order2" placeholder="请输入内容"></el-input>
       </template>
   </el-table-column>
</el-table> 

<2.>我开发的时候碰到一个大的问题是,el-table-column里面的值怎么传到el-input中去?

<3.>实际上slot-scope的值可以解决这个问题,vue原生slot-scope 的值将被用作一个临时变量名,可以接收父组件传过来的值, 而在element中的table对slot-scope的值封装成了一个大的对象,对象里面有属性row(行),column(列),$index(索引),store,所以我们可以通过scope.row拿到对应的值.

<4.>如果想详细了解slot-scope里面封装值的情况,可以将下面这个代码复制到vue文件中,在浏览器中就可以看到效果:

<el-table :data="addPlanRoute" border style="width:100%" @cell-dblclick="tableDbEdit">
       <el-table-column property="order1" label="顺序"></el-table-column>
       <el-table-column property="order2" label="装车点">
           <template slot-scope="scope">
               <el-button size="mini" type="primary" @click="add(scope1)">添加</el-button>
           </template>
       </el-table-column>
</el-table>
<script>
methods:{
    add(scope1){
      console.log(scope1)
    },
}
</script>

5.很开心你还能看到这里,棒棒哒,如果觉得写得还可以麻烦点下下面的赞,谢谢哒!

原文链接:segmentfault.com

上一篇:JS中的正则表达式的小知识总结
下一篇:vue+webpack在window10环境下搭建及遇到的问题

相关推荐

  • 🍊仿Element自定义Vue组件库

    (/public/upload/643b972fb2ebd2e6272ff8b16712b205) 前言 🍊 市面上目前已有各种各样的UI组件库,他们的强大毋庸置疑。

    1 个月前
  • (小白篇)vue-cli3.0创建项目+引入element-ui

    vuecli在2018年8月份发布了3.0版本,经过重构之后,可以说是一个船心版本! 在项目都落地之后,就想升级一下cli版本,尝一尝3.0带来的舒适,也是为后面项目的开展做一个准备。

    1 年前
  • (vue框架)为element组件赋初始值以后无法更改值得问题

    情况描述:组件未加载时已有初始值,mounted里面加载数据,赋值,渲染以后,组件无法更改内容 data里面已经有这个表单对象的初始值但还是无法修改,之前有过一次,没有给表单绑定对象,所以赋值以后无法...

    1 年前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包(https://npm.taobao.org/mirrors/node/v10.16.0/nodev10.16....

    1 年前
  • 通过SortableJS实现elementUItable拖动效果

    背景 目前elmenetUI的表格是不支持拖动的,但表格行拖动要求往往比较常见。通过引入sortableJS可以方便的让elementUI组件中的table支持拖动效果。

    3 个月前
  • 踩坑记之基于Vue+Element+Koa实现云上存储

    前言最近在做项目等时候,需要处理图片,表格,文本等多种格式的文件到数据库,用传统等方法进行处理既繁琐又比较麻烦,所以第一次尝试使用云上存储等方式来实现。比较了阿里云和腾讯云之类的网站之后,最终选择七牛...

    3 个月前
  • 跟着element学习写组件

    如何使用vue写一个组件库 组件以插件的形式引入使用,当然,也可以直接在页面引入组件文件,两者按需使用。 安装插件: vue.install源码: 通过源码可知,vue不会重复安装同...

    1 年前
  • 超详细 ElementUI 源码分析 —— Input

    最近在学习 Vue 框架,想深入了解一下组件化开发以及封装组件库的思想,而 ElementUI 作为这方面做的最好的也是最常用的组件库,它的源码一定有很多值得我们去学习的地方,所以去 ElementU...

    4 个月前
  • 财产&apos;价值&apos;不在型“价值存在;HtmlElement“;

    Bjarke FreundHansen(https://stackoverflow.com/users/81398/bjarkefreundhansen)提出了一个问题:The property 'v...

    2 年前
  • 详解JavaScript 中getElementsByName在IE中的注意事项

    详解JavaScript 中getElementsByName在IE中的注意事项 前言: 在IE59中是没有实现js的 getElementsByClassName()方法,但是实现了getEle...

    3 年前

官方社区

扫码加入 JavaScript 社区