Element Plus里的el-table表格

<template>
  <div class="double-information">参会单位</div>
  <el-form class="double-form" :model="queryParams" label-width="30px">
    <el-form-item>
      <el-input v-model="queryParams.keyword" placeholder="请输入搜索关键字" />
    </el-form-item>
    <el-button class="el-btn" type="submit" @click="search">搜索</el-button>
  </el-form>
  <div>
    <el-table :data="companyList" style="width: 100%" :span-method="arraySpanMethod"
      :cell-style="{ 'color': '#666666' }" :header-cell-style="{ 'background-color': '#F4F7FC' }" border>
      <el-table-column label="展位" width="85" prop="boothIndex"></el-table-column>

      <el-table-column label="单位名称">
        <template #default="scope">
          <span class="main-font" style="line-height: 50px" @click="goCompanyDetail(scope.row.companyId)">{{
            scope.row.companyName
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="需求岗位" width="215">
        <template #default="scope">
          <span class="main-font" style="color: blue;cursor: pointer;" @click="goJobsDetail(scope.row.schoolJobId)">{{
            scope.row.jobName
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="需求专业" width="285" prop="professionals"></el-table-column>
      <el-table-column label="人数" width="100">
        <template #default="scope">
          <span>{{ scope.row.jobNumber }}人</span>
        </template>
      </el-table-column>

      <el-table-column label="" width="140">
        <template #default="scope">
          <el-button size="mini" type="primary" class="p-btn" @click="deliverResume(scope.row)">申请职位
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination v-model:pageSize="pageInfo.pageSize" v-model:current-page="pageInfo.page" background
      layout="prev, pager, next" :total="pageInfo.total" @current-change="changePage" @size-change="changePage" />
  </div>
  <!-- 简历选择弹框 -->
  <el-dialog v-model="dialogFormVisible" title="选择简历">
    <div class="bounced" v-for="(item, index) in resumeList" :key="index">
      <span class="resume">{{ item.title }}</span>
      <span class="resume-btn">
        <el-button @click="resumeDetails(item.id)">预览</el-button>
        <el-button type="primary" @click="deliverFn(item)"> 投递 </el-button>
      </span>
    </div>
  </el-dialog>
  <!-- 简历预览弹框 -->
  <el-dialog v-if="dialogTableVisible" v-model="dialogTableVisible" width="60%">
    <ResumeDetails :info="resuleId" />
  </el-dialog>
</template>

<script>
import { defineComponent, reactive, toRefs, onMounted } from 'vue';
import { getDoubleBothmeetApi, getResumeListApi, jobDeliveryApi } from '@/api/index'
import { useRouter } from 'vue-router'
import ResumeDetails from "@/components/Resume/resumeDetails.vue";

export default defineComponent({
  components: { ResumeDetails },
  props: {
    bothmeetId: {
      type: String,
      default: ''
    },
    bothmeetName: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const route = useRouter()
    const state = reactive({
      dialogFormVisible: false,
      dialogTableVisible: false,
      resuleId: null,
      parameter: {
        resumeId: '', //简历id
        resumeName: '', //简历名称
        companyId: '', //单位id
        jobId: '', //职位id
        jobName: '', //职位名称
        schoolJobId: '', //高校职位id
        sourceId: '', //来源业务Id
        sourceName: '', //来源业务名称
        sourceType: 0 //投递业务类型
      },
      companyList: [],
      queryParams: {
        keyword: null,
      },
      pageInfo: {
        total: 0,
        pageSize: 15,
        page: 1
      },
      pageState: {
        panelMenuIndex: 0,
        mergeData: {
          column1Arr: [], // column1
          column1Index: 0, // column1索引
          column2Arr: [], // column2
          column2Index: 0, // column2索引
          column3Arr: [], // column3
          column3Index: 0, // column3索引
          column4Arr: [], // column4
          column4Index: 0, // column4
          column5Arr: [], // column5
          column5Index: 0, // column5索引
          column6Arr: [], // column6
          column6Index: 0 // column6索引
        }
      },
      resumeList: []
    })

    onMounted(() => {
      state.pageInfo.page = 1
      changePage();
    })

    const changePage = () => {
      if (!props.bothmeetId) return;
      let params = {
        ...state.pageInfo,
        id: props.bothmeetId,
        keyword: state.queryParams.keyword
      }
      getDoubleBothmeetApi(params).then(res => {
        const { items, total } = res.result;
        state.companyList = items;
        state.pageInfo.total = total;
        //2.设置表格合并数据
        merge(state.companyList);
      })
    }
    const mergeInit = () => {
      state.pageState.mergeData = {
        column1Arr: [], // column1
        column1Index: 0, // column1索引
        column2Arr: [], // column2
        column2Index: 0, // column2索引
        column3Arr: [], // column3
        column3Index: 0, // column3索引
        column4Arr: [], // column4
        column4Index: 0, // column4索引
        column5Arr: [], // column5
        column5Index: 0, // column5索引
        column6Arr: [], // column6
        column6Index: 0, // column6索引
      }
    }
    const merge = (data) => {
      mergeInit();
      if (data.length > 0) {
        for (let i = 0; i < data.length; i++) {
          if (i === 0) {
            state.pageState.mergeData.column1Arr.push(1);
            state.pageState.mergeData.column1Index = 0;
            state.pageState.mergeData.column2Arr.push(1);
            state.pageState.mergeData.column2Index = 0;
            state.pageState.mergeData.column3Arr.push(1);
            state.pageState.mergeData.column3Index = 0;
            state.pageState.mergeData.column4Arr.push(1);
            state.pageState.mergeData.column4Index = 0;
            state.pageState.mergeData.column5Arr.push(1);
            state.pageState.mergeData.column5Index = 0;
            state.pageState.mergeData.column6Arr.push(1);
            state.pageState.mergeData.column6Index = 0;
          } else {
            if (data[i].boothIndex === data[i - 1].boothIndex) {
              state.pageState.mergeData.column1Arr[state.pageState.mergeData.column1Index] += 1;
              state.pageState.mergeData.column1Arr.push(0);
            } else {
              state.pageState.mergeData.column1Arr.push(1);
              state.pageState.mergeData.column1Index = i;
            }

            state.pageState.mergeData.column2Arr.push(1);
            state.pageState.mergeData.column2Index = i;
            state.pageState.mergeData.column3Arr.push(1);
            state.pageState.mergeData.column3Index = i;
            state.pageState.mergeData.column4Arr.push(1);
            state.pageState.mergeData.column4Index = i;
            state.pageState.mergeData.column5Arr.push(1);
            state.pageState.mergeData.column5Index = i;
            state.pageState.mergeData.column6Arr.push(1);
            state.pageState.mergeData.column6Index = i;
          }
        }
      }
    }

    const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
      console.log(row, column, rowIndex)
      if (columnIndex === 0 || columnIndex === 1) {
        const _row_1 = state.pageState.mergeData.column1Arr[rowIndex];
        const _col_1 = _row_1 > 0 ? 1 : 0;

        return {
          rowspan: _row_1,
          colspan: _col_1
        }
      } else if (columnIndex === 2) {
        // 第二列 column2
        const _row_2 = state.pageState.mergeData.column2Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 3) {
        // 第三列 column3
        const _row_2 = state.pageState.mergeData.column3Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 4) {
        // 第四列 column4
        const _row_2 = state.pageState.mergeData.column4Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 5) {
        // 第五列 column5
        const _row_2 = state.pageState.mergeData.column5Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 6) {
        // 第六列 column6
        const _row_2 = state.pageState.mergeData.column6Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      }
    }

    const search = () => {
      state.pageInfo.page = 1
      changePage();
    }

    // const goCompanyDetail = (id) => {

    // }
    const goJobsDetail = (id) => {
      route.push({ path: 'jobs', query: { id: id, sourceType: 0, sourceId: props.bothmeetId, sourceName: props.bothmeetName } })
    }

    const deliverResume = (row) => {
      state.parameter.jobId = row.jobId
      state.parameter.jobName = row.jobName;
      state.parameter.schoolJobId = row.id;
      state.parameter.companyId = row.companyId;
      state.parameter.sourceId = props.bothmeetId;
      state.parameter.sourceName = props.bothmeetName;
      state.dialogFormVisible = true

      getResumeListApi({
        Page: 1,
        PageSize: 100
      }).then((res) => {
        if (res.code == '200') {
          // total.value = res.result.total
          state.resumeList.splice(0, state.resumeList.length, ...res.result)
        }
      })
    }

    // 投递简历
    const deliverFn = (row) => {
      state.dialogFormVisible = false
      state.parameter.resumeId = row.id;
      state.parameter.resumeName = row.title;
      jobDeliveryApi(state.parameter).then((res) => {
        console.log(state.parameter)
        console.log('res', res)
      })
    }

    //预览简历
    const resumeDetails = (id) => {
      state.resuleId = id;
      state.dialogTableVisible = true;
    };

    return {
      changePage,
      arraySpanMethod,
      search,
      // goCompanyDetail,
      goJobsDetail,
      deliverResume,
      deliverFn,
      resumeDetails,
      ...toRefs(state)
    }
  }
})
</script>

<style scoped>
table {
  border-collapse: collapse;
  width: 800px;
  height: 100px;
  font-size: 14px;
}

td {
  padding: 0 10px;
  border: 1px solid gray;
}

tr {
  height: 50px;
}

.el-btn {
  width: 80px;
  height: 30px;
  background: #1963d0;
  border-radius: 5px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  margin-left: 10px;
}
</style>
<style scoped>
.double-information {
  height: 50px;
  background: #f8f7ff;
  border: 1px solid transparent;
  margin-top: 20px;
  line-height: 50px;
  font-weight: 700;
  padding-left: 20px;
  box-sizing: border-box;
}

.informationContent {
  width: 850px;
  height: 150px;
  /* background-color: brown; */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 14px;
  color: gray;
}

h3 {
  font-size: 20px;
  color: black;
}

.instructions {
  width: 850px;
  min-height: 100px;
  text-indent: 2em;
  font-size: 18px;
}

.el-btn {
  width: 80px;
  height: 30px;
  background: #1963d0;
  border-radius: 5px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  margin-left: 10px;
}

.double-form {
  display: flex;
  margin: 20px 0;
}

.det-left {
  width: 930px;
  padding-right: 30px;
}

.det-right {
  width: 240px;
  height: 600px;
  /* background-color: salmon; */
}

.center {
  width: 1200px;
  display: flex;
  justify-content: space-between;
}

.inTheNearFuture {
  font-size: 24px;
}

.bounced {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  /* background-color: #ff9000; */
}
</style>