vue+element-ui+slot-scope或原生實現可編輯表格(日歷)

你們公司的產品是不是還在做一個可編輯表格功能?

1.前言

咱開發拿到需求大多數是去網上找成型的組件，找不到再看原生的方法能否實現，大牛除外哈，大牛一般喜歡封裝組件框架。

2.思路

可編輯表格在后台管理系統還是比較常用的，因為比較流行框架element,iview都沒有這個應用,所以考慮了兩種方法，下面我簡單說哈我的兩種方法：vue+element實現表格跨行或跨列合並

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>就可以

原文地址：https://segmentfault.com/a/1190000012554279