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>就能夠