Vue+Elementui实现多个表格table合并

技术关键点slot="append"这条代码用于卡槽，在表格末尾处添加你想要的样式:show-header="false"这条代码是用来忽略表格头完整代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><script

hikktn

2597人浏览 · 2021-06-23 00:08:20

hikktn · 2021-06-23 00:08:20 发布

技术关键点

slot="append"

这条代码用于卡槽，在表格末尾处添加你想要的样式

:show-header="false"

这条代码是用来忽略表格头

完整代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.15.2/lib/index.js"></script>
	<style>
		@import url("//unpkg.com/element-ui@2.15.2/lib/theme-chalk/index.css");
	</style>
	<body>
		<div id="app">
			<el-table :data="tableData" border>
				<el-table-column align="center" min-width="80%" prop="id" label="ID">
				</el-table-column>
				<el-table-column align="center" min-width="80%" prop="name" label="名称">
				</el-table-column>
				<el-table-column align="center" min-width="80%" prop="money" label="金钱">
				</el-table-column>
				<div slot="append" style="text-align: center">
					<!--在此处添加你想要插入在表格最后一行的内容-->
					<el-table :data="costTableData" border :show-header="false">
						<el-table-column align="center" min-width="80%" prop="name" label="名字">
						</el-table-column>
						<el-table-column align="center" min-width="80%" prop="fy" label="费用">
						</el-table-column>
					</el-table>
				</div>
			</el-table>
		</div>
	</body>
	<script>
		var Main = {
			data() {
				return {
					tableData: [{
							id: 0,
							name: '西瓜',
							money:'2'
						},
						{
							id: 1,
							name: '冬瓜',
							money:'1'
						},
						{
							id: 2,
							name: '南瓜',
							money:'2'
						},
					],
					costTableData: [{
							name: '一个西瓜价格',
							fy: '25'
						},
						{
							name: '一个冬瓜价格',
							fy: '12'
						},
					],
				}
			},
			methods: {

			}
		}
		var Ctor = Vue.extend(Main)
		new Ctor().$mount('#app')
	</script>

</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^