element el-table --vue-- 纯data数据 el-table+样式+合并 代码
效果:
// 项目成果管理(右侧表格) 2020.9.14 李瑶
<template>
<div class="project-table">
<!-- 进度表 -->
<div class="w100 f-w600 f16 no-w p-10">项目季报和年报成果</div>
<el-table :data="tableData" border style="width: 100%" :span-method="arraySpanMethod">
<el-table-column prop="yearDate" label="年份" align="center">
</el-table-column>
<el-table-column prop="start" label="项目启动" align="center">
<template slot-scope="scope">
<div class="flex-left">{{scope.row.start}}:</div>
<div class="fileOne flex-left" v-for="(value,key,index) in scope.row.startFiles" :index="index"><a :href="value" target="_blank" :title="key">{{key}}</a></div>
<div class="noInfo flex1-c" v-if="JSON.stringify(scope.row.startFiles) =='{}'">暂无数据</div>
</template>
</el-table-column>
<el-table-column prop="firstQuarter" label="第一季度" align="center">
<template slot-scope="scope">
<div class="flex-left">{{scope.row.firstQuarter}}:</div>
<div class="fileOne flex-left" v-for="(value,key,index) in scope.row.firstFiles" :index="index"><a :href="value" target="_blank" :title="key">{{key}}</a></div>
<div class="noSubmit flex1-c" v-if="JSON.stringify(scope.row.firstFiles) =='{}'">未提交</div>
</template>
</el-table-column>
<el-table-column prop="secondQuarter" label="第二季度" align="center">
<template slot-scope="scope">
<div class="flex-left">{{scope.row.secondQuarter}}:</div>
<div class="fileOne flex-left" v-for="(value,key,index) in scope.row.secondFiles" :index="index"><a :href="value" target="_blank" :title="key">{{key}}</a></div>
<div class="noSubmit flex1-c" v-if="JSON.stringify(scope.row.secondFiles) =='{}'">未提交</div>
</template>
</el-table-column>
<el-table-column prop="thirdQuarter" label="第三季度" align="center">
<template slot-scope="scope">
<div class="flex-left">{{scope.row.thirdQuarter}}:</div>
<div class="fileOne flex-left" v-for="(value,key,index) in scope.row.thirdFiles" :index="index"><a :href="value" target="_blank" :title="key">{{key}}</a></div>
<div class="noSubmit flex1-c" v-if="JSON.stringify(scope.row.thirdFiles) =='{}'">未提交</div>
</template>
</el-table-column>
<el-table-column prop="fourthQuarter" label="第四季度" align="center">
<template slot-scope="scope">
<div class="flex-left">{{scope.row.fourthQuarter}}:</div>
<div class="fileOne flex-left" v-for="(value,key,index) in scope.row.fourthFiles" :index="index"><a :href="value" target="_blank" :title="key">{{key}}</a></div>
<div class="noSubmit flex1-c" v-if="JSON.stringify(scope.row.fourthFiles) =='{}'">未提交</div>
</template>
</el-table-column>
<el-table-column prop="yearQuarter" label="年度" align="center">
<template slot-scope="scope">
<div class="flex-left">{{scope.row.yearQuarter}}:</div>
<div class="fileOne flex-left" v-for="(value,key,index) in scope.row.yearFiles" :index="index"><a :href="value" target="_blank" :title="key">{{key}}</a></div>
<div class="noSubmit flex1-c" v-if="JSON.stringify(scope.row.yearFiles) =='{}'">未提交</div>
</template>
</el-table-column>
<el-table-column prop="year" label="年报" align="center">
<template slot-scope="scope">
<div class="flex-left">{{scope.row.year}}:</div>
<div class="fileOne flex-left" v-for="(value,key,index) in scope.row.files" :index="index"><a :href="value" target="_blank" :title="key">{{key}}</a></div>
<div class="noSubmit flex1-c" v-if="JSON.stringify(scope.row.files) =='{}'">未提交</div>
</template>
</el-table-column>
</el-table>
<!-- 自定义节点成果 -->
<div class="w100 f-w600 f16 no-w p-10">自定义节点成果</div>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
<!-- 总结成果 -->
<div class="w100 f-w600 f16 no-w p-10">总结成果</div>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
components: {},
name: "",
data() {
return {
tableData: [
{
yearDate: "2016",
start: "实施方案",
startFiles: { 文件一: "http://www.w3school.com.cn" },
firstQuarter: "季报",
firstFiles: {
文件一: "http://www.w3school.com.cn",
文件二: "http://www.w3school.com.cn",
文件三: "http://www.w3school.com.cn",
},
secondQuarter: "季报",
secondFiles: {
文件二: "http://www.w3school.com.cn",
文件三: "http://www.w3school.com.cn",
},
thirdQuarter: "季报",
thirdFiles: {
文件一: "http://www.w3school.com.cn",
文件三: "http://www.w3school.com.cn",
},
fourthQuarter: "季报",
fourthFiles: {
文件一: "http://www.w3school.com.cn",
文件二: "http://www.w3school.com.cn",
文件三: "http://www.w3school.com.cn",
},
yearQuarter: "年报",
yearFiles: {
文件一: "http://www.w3school.com.cn",
文件二: "http://www.w3school.com.cn",
},
year: "年报",
files: {},
},
{
yearDate: "2016",
start: "三色评价",
startFiles: { 文件一: "http://www.w3school.com.cn" },
firstQuarter: "三色评价",
firstFiles: {
文件一: "http://www.w3school.com.cn",
文件二: "http://www.w3school.com.cn",
文件三: "http://www.w3school.com.cn",
},
secondQuarter: "三色评价",
secondFiles: {
文件二: "http://www.w3school.com.cn",
文件三: "http://www.w3school.com.cn",
},
thirdQuarter: "三色评价",
thirdFiles: {
文件一: "http://www.w3school.com.cn",
文件三: "http://www.w3school.com.cn",
},
fourthQuarter: "三色评价",
fourthFiles: {
文件一: "http://www.w3school.com.cn",
文件二: "http://www.w3school.com.cn",
文件三: "http://www.w3school.com.cn",
},
yearQuarter: "三色评价",
yearFiles: {
文件一: "http://www.w3school.com.cn",
文件二: "http://www.w3school.com.cn",
},
year: "三色评价",
files: {},
},
{
yearDate: "2016",
start: "监测意见",
startFiles: { 文件一: "http://www.w3school.com.cn" },
firstQuarter: "监测意见",
firstFiles: {
文件一: "http://www.w3school.com.cn",
文件二: "http://www.w3school.com.cn",
文件三: "http://www.w3school.com.cn",
},
secondQuarter: "监测意见",
secondFiles: {
文件二: "http://www.w3school.com.cn",
文件三: "http://www.w3school.com.cn",
},
thirdQuarter: "监测意见",
thirdFiles: {
文件一: "http://www.w3school.com.cn",
文件三: "http://www.w3school.com.cn",
},
fourthQuarter: "监测意见",
fourthFiles: {
文件一: "http://www.w3school.com.cn",
文件二: "http://www.w3school.com.cn",
文件三: "http://www.w3school.com.cn",
},
yearQuarter: "监测意见",
yearFiles: {
文件一: "http://www.w3school.com.cn",
文件二: "http://www.w3school.com.cn",
},
year: "监测意见",
files: {},
},
{
yearDate: "2017",
start: "实施方案",
startFiles: { 项目启动方案: "http://www.w3school.com.cn" },
firstQuarter: "季报",
firstFiles: {
我觉得文件名长点也无所谓吧就这样吧: "http://www.w3school.com.cn",
文件二: "http://www.w3school.com.cn",
文件三: "http://www.w3school.com.cn",
},
secondQuarter: "季报",
secondFiles: {
},
thirdQuarter: "季报",
thirdFiles: {
文件一: "http://www.w3school.com.cn",
文件三: "http://www.w3school.com.cn",
},
fourthQuarter: "季报",
fourthFiles: {
文件一: "http://www.w3school.com.cn",
文件二: "http://www.w3school.com.cn",
文件三: "http://www.w3school.com.cn",
},
yearQuarter: "年报",
yearFiles: {
文件一: "http://www.w3school.com.cn",
文件二: "http://www.w3school.com.cn",
},
year: "年报",
files: {},
},
{
yearDate: "2017",
start: "三色评价",
startFiles: { 文件一: "http://www.w3school.com.cn" },
firstQuarter: "三色评价",
firstFiles: {
文件一: "http://www.w3school.com.cn",
文件三: "http://www.w3school.com.cn",
},
secondQuarter: "三色评价",
secondFiles: {
文件二: "http://www.w3school.com.cn",
},
thirdQuarter: "三色评价",
thirdFiles: {
文件一: "http://www.w3school.com.cn",
文件三: "http://www.w3school.com.cn",
},
fourthQuarter: "三色评价",
fourthFiles: {
文件一: "http://www.w3school.com.cn",
文件二: "http://www.w3school.com.cn",
文件三: "http://www.w3school.com.cn",
},
yearQuarter: "三色评价",
yearFiles: {
},
year: "三色评价",
files: {},
},
{
yearDate: "2017",
start: "监测意见",
startFiles: { 文件一: "http://www.w3school.com.cn" },
firstQuarter: "监测意见",
firstFiles: {
文件一: "http://www.w3school.com.cn",
文件二: "http://www.w3school.com.cn",
文件三: "http://www.w3school.com.cn",
},
secondQuarter: "监测意见",
secondFiles: {
文件二: "http://www.w3school.com.cn",
},
thirdQuarter: "监测意见",
thirdFiles: {
文件一: "http://www.w3school.com.cn",
文件三: "http://www.w3school.com.cn",
},
fourthQuarter: "监测意见",
fourthFiles: {
},
yearQuarter: "监测意见",
yearFiles: {
文件一: "http://www.w3school.com.cn",
文件二: "http://www.w3school.com.cn",
},
year: "监测意见",
files: {},
},
],
// 合并的数组
spanArr: [],
pos: 0,
};
},
computed: {},
watch: {},
methods: {
// 获取合并的数组
getSpanArr(tableData) {
for (var i = 0; i < tableData.length; i++) {
if (i === 0) {
// 第一行的不动
this.spanArr.push(1);
this.pos = 0;
} else {
// 判断当前元素与上一个元素是否相同
if (tableData[i].yearDate === tableData[i - 1].yearDate) {
// console.log(this.pos,"this.pos")
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.pos = i;
}
}
}
// console.log("这是this.spanArr", this.spanArr);
// console.log("这是pos", this.pos);
},
// 年份合并
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
// 合并第一列的
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
},
},
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {
this.getSpanArr(this.tableData);
},
beforeUpdate() {},
updated() {},
beforeDestroy() {},
distroyed() {},
};
</script>
<style lang='scss' scoped>
// 公共部分
// 文件样式
.fileOne {
display: block;
width: 100%;
a {
display: inline-block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
// 暂无数据样式
.noInfo {
width: 100%;
font-size: 14px;
color: #ccc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// 未提交样式
.noSubmit {
width: 100%;
font-size: 14px;
color: red;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.flex-left{
width:100%;
display: flex;
justify-content: flex-start;
}
.flex1 {
display: flex;
flex-direction: row;
}
.flex1-c {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.f-w600 {
font-weight: 600;
}
.f16 {
font-size: 16px;
}
.w100 {
width: 100%;
}
.p-10 {
padding: 10px;
}
.no-w {
white-space: nowrap;
}
.project-table {
width: 100%;
height: 100%;
overflow: auto;
}
</style>
<style>
/* 右侧表格多余的部分滚动 */
.el-tabs__content {
height: 90%;
overflow: auto;
}
</style>