下面是用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:
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;
}
js:
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:"1234567890@153.com"}]}
]
}
},
methord:{
deleteClick(id){
this.tableBodyData.splice(id,1);
}
}