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

2017-12-25

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环境下搭建及遇到的问题
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部