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