vue 用div製作含固定列的表格
阿新 • • 發佈:2019-01-21
下面是用div做的一個含固定操作列的表格,引入了vue,下面是核心部分
html:
<div class="table"> <div class="tableBody"> <div class="tabRow"> <div v-for="item in tableHeadData" class="tabCol">{{item.name}}</div> </div> <div class="tabRow" v-for="item in tableBodyData"> <div class="tabCol" v-for="tag in item.rows">{{tag.col}}</div> </div> </div> <div class="fixed"> <div class="fixBtn"><b>操作</b></div> <div class="fixBtn" v-for="item in tableBodyData"> <button @click="deleteClick(item.id)">刪除</button> </div> </div> </div>
css:
js:div.table{ position:relative; width:100%; min-height:300px; overflow-X:scroll; } div.tableBody{ position:absolute; top:0; left:0; } div.fixed{ position:absolute; top:0; right:0; width:100px; } div.tabRow{ float:left; height:50px; } div.tabCol{ float:left; width:100px; padding:0 5px; } div.fixBtn{ height:50px; padding:0 5px; } button{ padding:5px 10px; background-color:#fff; border:1px solid #bbb; border-radius:5px; outline:none; }
data(){
return {
tableHeadData:[
{id:1,name:"編號"},
{id:1,name:"姓名"},
{id:1,name:"年齡"},
{id:1,name:"住址"},
{id:1,name:"電話"},
{id:1,name:"郵箱"}
],
tableBodyData:[
{id:1,
rows:[{col:1},{col:"張三"},{col:"19"},{col:"長安街118號"},{col:"1234567890"},{col:" [email protected]"}]}
]
}
},
methord:{
deleteClick(id){
this.tableBodyData.splice(id,1);
}
}