vue+element-ui+slot-scope或原生实现可编辑表格(日历)

大家公司的产品是否是还在作一个可编辑表格功能?

1.前言

咱开发拿到需求大多数是去网上找成型的组件，找不到再看原生的方法可否实现，大牛除外哈，大牛通常喜欢封装组件框架。

2.思路

可编辑表格在后台管理系统仍是比较经常使用的，由于比较流行框架element,iview都没有这个应用,因此考虑了两种方法，下面我简单说哈个人两种方法：

3.方法一:

直接经过element的table组件中的cell-click和cell-dbclick监听表格事件,回调函数有四个参数row, column, cell, event,能够拿这些参数作相应的筛选,而后使用操做dom的方法添加input达到更改值的做用,贴上原生代码:

<template>
//表格也能够写成原生的table
<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> 
</template>

<script>
export default{
    data(){
        return{}
    },
    methods:{
    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;
            };
        }
     }
    }
}
</script>

这个方法确实能够实现功能,谁让原生js功能强大的。

4.方法二：

<1.>在element的table组件中使用slot-scope（做用域插槽）来实现该需求，就至关于将<el-input>直接做为<el-table-column>的子组件使用,不用绑定对应的方法,直接用:hover方法就能够修改<el-input>的样式
<2.>slot-scope可能有些人有点陌生，这里贴上官网的连接请戳这里，里面很详细

<el-table :data="addPlanRoute" border style="width:100%">
   <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>

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

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

<5.>若是想详细了解slot-scope里面封装值的状况,能够将下面这个代码复制到vue文件中,在浏览器中就能够看到效果:

<el-table :data="addPlanRoute" border style="width:100%">
       <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.方法三:

直接在原生<table>里面嵌套<input>标签,而后经过改变样式来改变边框的显示,直接贴上代码,复制便可演示!

<template>
  <div>
    <table class="edit-table">
      <thead>
        <th>姓名</th><th>年龄</th><th>成绩</th><th>性别</th>
      </thead>
      <tbody>
        <tr><td><input value="张三"/></td><td><input value="30"/></td><td><input value="90"/></td><td><input value="女"/></td></tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  
</script>

<style lang="scss">
.edit-table{
    border:1px solid gray;
    border-collapse: collapse;
    th{
      border:1px solid gray;
    }
  tbody{
    
    tr{
      td{
        border:1px solid gray;
        input{
          border:none;
        }
      }
    }
  }
}
</style>

6.三种方法的对比

1.其实本质上都是利用<input>标签能够修改文本的特性;
2.方法三是最简单的能够利用<td>嵌套<input>直接实现表格的修改,还能够结合v-model来双向绑定数据,只是须要本身手动是修改下样式,
3.有个问题:若是是合并的行或列须要修改应该怎么实现?
这边首先要实现表格的合并功能,有篇文章讲的这个,vue+element实现表格跨行或跨列
而后能够套用这篇文章的三个方法
3.方法二若是项目在使用vue+element技术也是一种不错的选择

7.很开心你还能看到这里,棒棒哒!欢迎交流.

7.日历

日历能够直接对应将slot-scope里面的组件改成日期组件<el-date-picker>就能够