其中多選功能參考：https://jsfiddle.net/muchen/7r358jmu/2/
來個(gè)效果
| 名稱 | 年齡 | 性別 |
|---|---|---|
| 張三 | 11 | 男 |
| 李四 | 12 | 女 |
| 王五 | 13 | - |
當(dāng)然凛澎，上訴只是要實(shí)現(xiàn)的效果焙蹭，還要再加上多選功能
淺談表格
表格組件比較沒有技術(shù)含量，主要掌握vue的v-for的使用就可以了刚照，但是多選功能卻比較復(fù)雜肛根，然而這個(gè)復(fù)雜的問題卻被上述網(wǎng)址所展示的代碼優(yōu)雅的解決了，所以這個(gè)組件會(huì)是一個(gè)非常值得學(xué)習(xí)的代碼
主要講多選哈原押，其他的就帶過了
多選功能
如https://segmentfault.com/q/1010000006893364?_ea=1172273里面的回答，其原理：
- 給每個(gè)數(shù)據(jù)增加一個(gè)屬性偎血，selected
- 在 computed 里面增加一個(gè) allSelected 的計(jì)算屬性
- 定義該屬性的 get & set
- 把a(bǔ)llSelected 綁定到 thead 的 checkbox 上
實(shí)現(xiàn)的效果：
- tbody 里面每行都選中诸衔，thead checkbox自動(dòng)選中
- thead checkbox選中狀態(tài)下 tbody某一行不選擇，thead 選中自動(dòng)取消
- thead checkbox點(diǎn)擊選中颇玷，tbody所有行選中
- thead checkbox點(diǎn)擊取消選中 tbody所有行不選中
好了笨农，上訴文字都是抄襲，還得來點(diǎn)真貨帖渠，是自己修改而成的：
template
<template>
<div class="mtable">
<table class="table" >
<thead>
<th v-if="mulSelect" >
<div><input type="checkbox" v-model="allSelected" /></div>
</th>
<th v-for="field in fields" >
{{field.name}}
</th>
</thead>
<tbody>
<tr v-for="data,index in rows" >
<td v-if="mulSelect" >
<div><input type="checkbox" v-model="items[index].seleced" /></div>
</td>
<td v-for="field in fields" >
{{data[field.name]}}
</td>
</tr>
</tbody>
</table>
</div>
</template>
其中mulSelect谒亦，rows，field是父組件傳遞的參數(shù)空郊，mulSelect用來控制是否顯示多選份招，rows是json格式的數(shù)據(jù)，fields包含有屬性名稱
script
<script>
function getItems(){
var items = [];
for(var i=0;i<100;i++){//定義支持最大行數(shù)為100行
items.push({
seleced:false
})
}
return items
}
const ITEMS = getItems()
export default {
name: 'Table',
data(){
return {
"items":ITEMS
}
},
props:[
"fields","rows","mulSelect"
],
computed:{
allSelected:{
get: function () {
return this.items.reduce(function(prev, curr) {
return prev && curr.seleced;
},true);
},
set: function (newValue) {
this.items.forEach(function(item){
item.seleced = newValue;
});
}
}
}
}
</script>
其中g(shù)etItems可以看出狞甚，只支持100行锁摔，有需要的話可以自行調(diào)整，廢話不多說了哼审，上樣式：
css
<style>
table.table{
margin: 0 auto;
empty-cells:show;
border-collapse: collapse;
width: 100%;
}
.table tr{
}
.mtable{
width: 100%;
max-height: 450px;
overflow: auto;
}
.table td,.table th{
border: 1px #eee solid;
height: 30px;
line-height: 30px;
min-width: 64px;
overflow: hidden;
}
.table tr td:first-child,.table thead th:first-child{
width: 32px;
padding: 0px;
}
.table input[type=checkbox]{
zoom: 180%;
margin-top: 8px;
}
</style>
父組件調(diào)用
...
<Table :fields="fields" :rows="rows" :mulSelect="mulSelect" />
...
以下代碼是必須的：
<script>
import Table from '@/components/Table'
...
components:{
"Table":Table
}
...
好困吶谐腰，還落下什么呢？對(duì)了涩盾，還有張三和李四：
//數(shù)據(jù)格式
const fields = [
{name:"姓名"},{name:"年齡",name"性別"}
]
const rows=[
{"姓名":"張三","年齡":11,"性別":"男"},
{"姓名":"李四","年齡":2,"性別":"女"},
{"姓名":"王五","年齡":13,"性別":"-"}
]
該睡了十气。。旁赊。
另外桦踊，分頁組件，請(qǐng)查看本人另一篇文章vue實(shí)現(xiàn)分頁組件
