el-table合并单元格

<template>
  <div class="dumu_box">
    <div class="z-box">
      <div class="search">
        <div style="display: flex; align-items: center; margin-right: 15px;">
          <span class="span">在线状态:</span>
          <el-select v-model="status" placeholder="请选择状态" size="mini">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="search"
          plain>搜索</el-button
        >
        <el-button size="small" icon="el-icon-circle-close" @click="clear"
          >清空</el-button
        >
      </div>
      <div class="container">
        <el-table
          :data="tableData"
          :span-method="objectSpanMethod"
          border
          style="width: 100%; margin-top: 20px;"
        >
          <el-table-column
            label="序号"
            width="80"
            type="index"
          ></el-table-column>
          <el-table-column
            prop="orgName"
            label="机构"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="deviceId"
            label="设备ID"
            width="180"
          ></el-table-column>
          <el-table-column label="设备UUID">
            <template slot-scope="scope">
              {{ scope.row.deviceUuid }}
            </template>
          </el-table-column>
          <el-table-column label="设备状态">
            <template slot-scope="scope">
              {{ scope.row.status == 2? '在线':'不在线' }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="bind(scope.row)"
                v-if="!scope.row.orgId"
                >绑定</el-button
              >
              <el-button
                type="text"
                @click="loadData(scope.row)"
                size="small"
                >下发数据</el-button
              >
              <el-button
                type="text"
                @click="goDataLoad(scope.row)"
                size="small"
                >下发记录</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="order_block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <div style="width: 40%;">
        <el-drawer
          :title="title"
          :visible.sync="drawer"
          :modal="true"
          direction="rtl"
          :before-close="handleClose"
          :destroy-on-close="true"
          :append-to-body="true"
          size="30%"
        >
          <div class="box" style="padding: 10px;">
            <el-form
              :label-position="form"
              label-width="120px"
              :model="form"
            >
              <el-form-item label="绑定机构">
                <el-select
                  v-model="form.orgId"
                  placeholder="请选择绑定机构"
                  filterable
                  remote
                  reserve-keyword
                  size="small"
                  :remote-method="remoteMethod"
                  :loading="orgloadng"
                  style="width: 100%;"
                >
                  <el-option
                    v-for="item in orgIdOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div style="text-align:center;">
              <el-button type="primary" size="small" @click="saveHandler" :loading="loading"
                >保存</el-button
              >
              <el-button size="small" @click="cancelHandler">取消</el-button>
            </div>
          </div>
        </el-drawer>
      </div>
    </div>
    <add-faces ref="addFaces"></add-faces>
  </div>
</template>

<script>
import {
  add,
  getList,
} from "@/api/device/dumubox.js";
import { getSeniorOrgList } from "@/api/public.js";
import addFaces from "./dumubox/addFaces.vue"
export default {
  components: {
    addFaces
  },
  data() {
    return {
      title: "新增",
      form: {
        orgId: "",
        deviceId: "",
      },
      drawer: false,
      loading: false,
      orgloadng: false,
      current: 1,
      size: 10,
      total: 0,
      status: "", // 1 不在线 2 在线
      tableData: [],
      spanArr: [],
      position: 0,
      options: [{
        value: '1',
        label: '不在线'
      }, {
        value: '2',
        label: '在线'
      }]
    };
  },
  created() {
    this.search();
  },
  methods: {
    goDataLoad(row) {
      this.$router.push({ path: "/device/dataupload", query: { orgId: row.orgId } });
    },
    loadData (row) {
      this.$refs.addFaces.showPop(row)
    },
    remoteMethod(query){
      // 根据输入的deviceNo设备编号去获取uId
      this.orgloadng = true
      getSeniorOrgList({'orgName':query}).then((res)=>{
        this.orgloadng = false
        if(res && res.data && res.data.code==200){
          this.orgIdOptions = res.data.data
        }
      })
    },
    clear() {
      this.status = "";
      this.search();
    },
    cancelHandler() {
      for (const key in this.form) {
        this.form[key] = "";
      }
      this.drawer = false;
    },
    saveHandler() {
      if (!this.form.orgId) {
        this.$message.error("请选择机构");
        return
      }
      this.loading=true;
      let obj = { orgId: this.form.orgId, deviceId: this.form.deviceId };
      add(obj).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          for (const key in this.form) {
            this.form[key] = "";
          }
          this.drawer = false;
          this.loading=false;
          this.search();
        }
      });
    },
    bind(row) {
      this.form.deviceId = row.deviceId
      this.drawer = true;
      this.title = "绑定";
    },
    search() {
      let obj = {
        status: this.status,
      };
      getList(this.current, this.size, obj).then((res) => {
        if (res.data.code == 200) {
          let { records, total, current } = res.data.data;
          this.tableData = records;
          this.total = total;
          this.current = current;
          this.rowspan();
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.size = val;
      this.current = 1;
      this.search();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.search();
    },
    rowspan() {
      this.spanArr = [];
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1);
          this.position = 0;
        } else {
          if (this.tableData[index].id === this.tableData[index - 1].id) {
            this.spanArr[this.position] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.position = index;
          }
        }
      });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex === 1) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    handleClose() {
      this.drawer = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.dumu_box {
  background: #f0f2f5;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  .z-box {
    box-sizing: border-box;
    width: 100%;
    background: #fff;
    .search {
      display: flex;
      padding: 20px;
      .span {
        display: inline-block;
        width: 100px;
        text-align: center;
      }
    }
    .container {
      padding: 0px 20px 0px 20px;
    }
    .order_block {
      width: 90%;
      padding: 20px 20px 20px 20px;
      display: flex;
      justify-content: flex-end;
      padding-bottom: 100px;
    }
    .box {
      padding: 0 30px;
    }
  }
}
</style>