[聚合文章] 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  @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  @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.很开心你还能看到这里,棒棒哒,如果觉得写得还可以麻烦点下下面的赞,谢谢哒!

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。