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

<h2>大家公司的产品是否是还在作一个可编辑表格功能?</h2> <h2>1.前言</h2> <p>咱开发拿到需求大多数是去网上找成型的组件，找不到再看原生的方法可否实现，大牛除外哈，大牛通常喜欢封装组件框架。</p> <h2>2.思路</h2> <p>可编辑表格在后台管理系统仍是比较经常使用的，由于比较流行框架element,iview都没有这个应用,因此考虑了两种方法，下面我简单说哈个人两种方法：<a href="http://www.jqhtml.com/down/7658.html" target="_blank">vue+element实现表格跨行或跨列合并</a></p> <h2>3.方法一:</h2> <p>直接经过element的table组件中的cell-click和cell-dbclick监听表格事件,回调函数有四个参数row, column, cell, event,能够拿这些参数作相应的筛选,而后使用操做dom的方法添加input达到更改值的做用,贴上原生代码:</p>

<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>

<p>这个方法确实能够实现功能,谁让原生js功能强大的。</p> <h2>4.方法二：</h2> <p>&lt;1.&gt;在element的table组件中使用slot-scope（做用域插槽）来实现该需求，就至关于将&lt;el-input&gt;直接做为&lt;el-table-column&gt;的子组件使用,不用绑定对应的方法,直接用:hover方法就能够修改&lt;el-input&gt;的样式<br>&lt;2.&gt;slot-scope可能有些人有点陌生，这里贴上官网的连接<a href="https://cn.vuejs.org/v2/guide/components.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD" rel="nofollow noreferrer">请戳这里</a>，里面很详细</p>

<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>

<p>&lt;3.&gt;我开发的时候碰到一个大的问题是,el-table-column里面的值怎么传到el-input中去?</p> <p>&lt;4.&gt;实际上slot-scope的值能够解决这个问题,vue原生slot-scope 的值将被用做一个临时变量名,能够接收父组件传过来的值, 而在element中的table对slot-scope的值封装成了一个大的对象,对象里面有属性row(行),column(列),$index(索引),store,因此咱们能够经过scope.row拿到对应的值.</p> <p>&lt;5.&gt;若是想详细了解slot-scope里面封装值的状况,能够将下面这个代码复制到vue文件中,在浏览器中就能够看到效果:</p>

<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>

<h2>5.方法三:</h2> <p>直接在原生&lt;table&gt;里面嵌套&lt;input&gt;标签,而后经过改变样式来改变边框的显示,直接贴上代码,复制便可演示!</p>

<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>

<h2>6.三种方法的对比</h2> <p>1.其实本质上都是利用&lt;input&gt;标签能够修改文本的特性;<br>2.方法三是最简单的能够利用&lt;td&gt;嵌套&lt;input&gt;直接实现表格的修改,还能够结合v-model来双向绑定数据,只是须要本身手动是修改下样式,<br>3.有个问题:若是是合并的行或列须要修改应该怎么实现?<br>这边首先要实现表格的合并功能,有篇文章讲的这个,<a href="https://segmentfault.com/a/1190000012643061">vue+element实现表格跨行或跨列</a><br>而后能够套用这篇文章的三个方法<br>3.方法二若是项目在使用vue+element技术也是一种不错的选择</p> <p>7.很开心你还能看到这里,棒棒哒!欢迎交流.</p> <h2>7.日历</h2> <p>日历能够直接对应将slot-scope里面的组件改成日期组件&lt;el-date-picker&gt;就能够</p>

原文地址：http://www.javashuo.com/article/p-ogireqtg-bw.html