vue 自定义table页

 示例:

<!-- table标签页面 -->
<template>

	<div class="Content">
		<div class="HeadDiv">
			<tab-header ref="tab1" v-bind:curTittle="seletTittle" v-bind:headers="subjects" @HeaderClick="tabClick"></tab-header>
			<!-- <tab-header ref="tab1" v-bind:headers="subjects" @HeaderClick="tabClick"></tab-header> -->
		</div>
		
		<!-- <div v-if="typeof(iteamDatas) === undefined || iteamDatas.length === 0" class="PaperDiv2" >
			<image src="../../static/images/data_empty.png"></image>
		</div>
		<div v-else class="PaperDiv" v-for="iteamData in iteamDatas">
			<paper-iteam v-bind:paperData="iteamData" @IteamClick="paperIteamClick"> </paper-iteam>
		</div> -->
	</div>

</template>


<script>
	// import yu from '../../yu.js'
	// import PaperIteam from '../../components/custom/PaperIteam.vue'
	import TabHeader from '../../components/custom/TabHeader.vue'

	export default {
		components: {
			// PaperIteam,
			TabHeader,
		},

		data() {
			return {
				// examId: 0,
				subjects: [{
						tittle: "数学",
						id: "001"
					},
					{
						tittle: "语文",
						id: "002"
					},
					{
						tittle: "英语",
						id: "003"
					},
					{
						tittle: "政治",
						id: "004"
					},
					{
						tittle: "历史",
						id: "005"
					},
					{
						tittle: "生物",
						id: "006"
					}
				],
				seletTittle: "",
				selectid: 0,
			}
		},
		onLoad(param) {
			console.log(param.id)
			this.examId = param.id;
			
			this.getallsubject();
		},
		onShow() {},
		methods: {
			
			// table选择后
			tabClick(subject) {
				console.log("tabClick已经调用！" + subject.tittle);
				
				// that.iteamDatas = tmp;			// 设置table页显示内容
				// this.$refs.tab1.ClickIteam(0);	// 调用子控件中的方法
			},
			
			// 获取所有科目信息
			getallsubject() {
				
				// var SubjectList =  uni.getStorageSync("SubjectList"); // 获取存储的科目信息
				
				// // 获取所有科目信息
				// var tmp = [];
				// if(typeof(SubjectList) != undefined)
				// {
				// 	for (let i = 0; i < SubjectList.length; i++) {
					
				// 		let iteam = new Object();
				// 		iteam.tittle = SubjectList[i].SubjectName;
				// 		iteam.id = SubjectList[i].SubjectId + '';
					
				// 		tmp.push(iteam)
				// 	}
				// }
				// this.subjects = tmp;
				// console.log("allsubject.tmp -> "+ JSON.stringify(tmp));	
				
				this.tabClick({id: this.selectid, tittle: this.seletTittle});
			},
			
			// 将float值保留,小数点后n位
			FloatN(fValue, n) {
				let val = parseFloat(fValue).toFixed(n);
				return val;
			},

		}
	}
</script>


<style scoped>
	.Content {
		width: 90%;
		height: 100%;
		margin: 5rpx auto;
	}

	.HeadDiv {
		width: 100%;
		height: auto;
	}

	.PaperDiv {
		margin-top: 0px;
		width: 100%;
		height: 90%;
		overflow: auto;
	}
	
	.PaperDiv2 {
		text-align: center;  
		width: 100%;
		/* box-shadow: 0 0 5px 0px rgb(126, 125, 125); */
	}
	
	.PaperDiv2 image {
		margin-top: 360rpx;
		/* margin-bottom: 360rpx; */
		width: 346rpx;
		height: 346rpx;
	}
</style>

<style>
	/* 边框底部划线 */
	.bottomLine {
		border-bottom: 1px solid #ccc;
	}

	/* 边框线 */
	.boxShadow {
		box-shadow: 0 0 5px 0px rgb(126, 125, 125);
	}
</style>

TabHeader.vue

<template>
	<div class="Content">

		<!-- <div class="logo">
		  <a href="http://scimence.cn">
			<img src="../assets/logo.png">
		  </a>
		</div> -->
		
		<div class="DivLine" >
			<div class="headerDiv" v-for="header in headers" v-bind:class="{'select': showTittle===header.tittle }" @click="headerClick(header)">
				{{header.tittle}}
			</div>
		</div>
		
	</div> 
</template>

<script>
	export default {
		name: 'TabHeader',
		props: {
			selectHeader: String,
			curTittle: String,
			headers: Array,
		},
		data() {
			return {
				init: false,
				showTittle:'',
				msg: 'Welcome to Your Vue.js App',
				menus: [{
						tittle: "数学",
						id: "home"
					},
					{
						tittle: "语文",
						id: "soft"
					},
					{
						tittle: "英语",
						id: "message"
					}
				]
			}
		},

		created() {
			// this.showTittle = this.curTittle;	// 创建时属性curTittle为空
		},
		computed:{
			// showTittle2()
			// {
			// 	this.showTittle = this.curTittle;	// curTittle每次变动时，均会调用showTittle2
			// 	return this.showTittle;
			// }
		},
		watch: {
			curTittle:function(val) {
				// this.showTittle = val;				// 仅仅变动时调用
			},
		},
		mounted() {
			this.showTittle = this.curTittle;			// 在watch之后仅仅执行一次
		},
		methods: {
			
			ClickIteam(index)
			{
				this.headerClick(this.headers[index]);
			},
			
			headerClick(header) {
				
				if (this.showTittle != header.tittle) {
					this.showTittle = header.tittle;
					this.$emit('HeaderClick', header)
				}
			}

			// menuClick(path){
			//   headerDiv.forEach(element => {
			//     element.tittle = "选中";
			//     if(element.path == path) element.selected = true;
			//     else element.selected = false;
			//   });
			// }
		}
	}
</script>

<style scoped>
	.Content {
		position: relative;
		text-align: left;
		display: inline-block;
		
		width: 100%;		// 显示屏幕宽度
		overflow: auto;		// 超出宽度自动滚动
		/* 高度未限制,则随内容加长 */
		
		/* background-color: gray; */
		vertical-align: middle;

		border-bottom: 1px solid #ccc;
		padding: 4px 0px 4px 0px;
	}
	
	/* 已最大长度/最大宽度展示一行 */
	.DivLine{
		height: max-content;	
		width: max-content;		// 随内容自动加宽
	}

	.headerDiv {
		float: left;
		padding-left: 10rpx;
		padding-right: 10rpx;
		display: inline-block;
		/* font-size: large; */
		font-size: 32rpx;
		font-weight: 800;

		color: rgb(66, 165, 245);
	}

	.select {
		/* background-color: #ebebeb; */
		border-bottom: 3px solid rgb(66, 165, 245);
		/* box-shadow: 0 0 5px 0px rgb(126, 125, 125); */
	}

	/* .headerDiv router-link{
  display:block;
  font-weight:bold;
  color:#222222;
  width:100px;
  height: 100%;
  text-align:center;
  margin: 0px;
  text-decoration:none;
}

.headerDiv router-link:hover
{
  background-color: #F6F6F6;
} */
</style>