element el-table --vue-- 纯data数据 el-table+样式+合并 代码

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>