效果图
1、2、
大概就是这样的效果。
在表头数据比较多的情况下,可以设置动态的表头。
下面是一个该效果的.vue文件。
<template>
<div @click="tabHeadChange=false">
<table style="width: 80%;">
<thead>
<tr style="background-color: rgba(132,84,255,0.14)">
<th v-for="(tab,t) in staticHeadKey" v-show="tab.checked">{{tab.name}}</th>
<th>操作
<div style="position: relative;display: inline-block">
<span @click.stop="tabHeadChange =! tabHeadChange" style="cursor: pointer">。。。</span>
<div v-show="tabHeadChange" style="position: absolute;right: 0;background-color: white;box-shadow: 0 0 6px 3px rgba(134,102,255,0.55)">
<ul @click.stop="function() {
//这个是阻止事件冒泡到input标签
}" style="padding: 0">
<li v-for="(tab,t) in staticHeadKey" v-show="tab.disabled == false" style="width: 120px;list-style: none">
<input type="checkbox" v-model="tab.checked"/>{{tab.name}}
</li>
</ul>
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr v-show="totalCount == 0">
<td>没有数据</td>
</tr>
<tr v-for="(person,i) in personList">
<td v-for="(tab,t) in staticHeadKey" v-show="tab.checked">{{person[tab.key]}}</td>
<td>
<button>删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: "ChangeTable",
data(){
return{
tabHeadChange:false,
staticHeadKey:[
{key:'index',name:'序号',disabled:true,checked:true},
{key:'name',name:'名字',disabled:true,checked:true},
{key:'gender',name:'性别',disabled:true,checked:true},
{key:'address',name:'地址',disabled:false,checked:true},
{key:'phone',name:'电话',disabled:false,checked:true},
{key:'wechat',name:'微信',disabled:false,checked:true}
],
totalCount:6,
personList:[
{index:1,name:'可可乐',gender:'女',address:'西西里',phone:'1818181818',wechat:'ojjj4545'},
{index:2,name:'雪碧',gender:'不晓',address:'海洋',phone:'78754545',wechat:'trtrtr4545'},
{index:3,name:'炸鸡',gender:'女',address:'大漠',phone:'1818181818',wechat:'ojjj4545'},
{index:4,name:'啤酒',gender:'男',address:'非洲',phone:'1818181818',wechat:'4444444'},
{index:5,name:'大雪',gender:'不晓',address:'河流',phone:'1818181818',wechat:'ojjj4545'},
{index:6,name:'满天',gender:'男',address:'公路',phone:'3232323232',wechat:'4545451121'},
]
}
},
methods:{
}
}
</script>
<style scoped>
input[type = checkbox]{
cursor: pointer;
position: relative;
width: 15px;
height: 15px;
font-size: 14px;
}
input[type=checkbox]::after{
position: absolute;
top: 0;
background-color: #FFFFFF;
color: #FFFFFF;
width: 15px;
height: 15px;
display: inline-block;
visibility: visible;
padding-left: 0px;
text-align: center;
content: ' ';
border-radius: 3px;
border: 1px solid #E6E6e6;
}
input[type=checkbox]:checked::after{
content: "✓";
font-size: 12px;
font-weight: bold;
background-color: darkorchid;
}
</style>
最好使用vuex保存用户选择好要显示的表头,这样在当前登录过程中会一直保存这样的表头。
更新
加了改变input[type = checkbox]颜色的css