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>就可以
原文地址:https://segmentfault.com/a/1190000012554279
vue+element-ui+slot-scope或原生實現可編輯表格(日歷)