el-table合并行，控制全选框的可选状态

给相同的类合并行

 <el-table
            border
            class="customer-no-border-table"
            element-loading-text="数据正在加载中..."
            :row-class-name="tableRowClassName"
            :header-cell-style="{ background: '#E7F2FD', color: '#252525' }"
            style="width: 100%; border-top: 1px solid #409eff"
            :cell-style="{ borderColor: '#1890ff' }"
            v-loading="leftLoading"
            ref="leftTable"
            :data="leftTable"
            @row-click="getItem"
            highlight-current-row
            height="400"
            :span-method="objectSpanMethod"
          >
            <el-table-column
              prop="detailTypeGroupStr"
              align="center"
              width="100"
            >
            </el-table-column>
            <el-table-column
              label="升级对象"
              prop="detailTypeStr"
              align="center"
            >
              <template slot-scope="{ row, $index }">
                <div
                  style="
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                  "
                >
                  <div>{{ row.detailTypeStr }}</div>
                  <div>
                    <el-button
                      type="primary"
                      size="small"
                      style="margin-left: 20px"
                      v-if="
                        (row.flagIndex !== 0 && row.detailTypeGroup === 11) ||
                        (row.flagIndex !== 0 && row.detailTypeGroup === 12)
                      "
                      @click="oneClickSet(row)"
                      >一键同步</el-button
                    >
                  </div>
                </div>
              </template>
            </el-table-column>
</el-table>

  this.leftTable = res.data;
          this.getSpanArr(res.data);
          // 给要显示一键设置按钮的行，添加flagIndex标识
          const newArray = this.leftTable.map((i, index) => {
            const j = this.spanArr[index];
            return {
              ...i,
              flagIndex: j,
            };
          });
          this.leftTable = newArray;

 // 合并行
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    getSpanArr(data) {
      // data就是我们从后台拿到的数据
      for (let i = 0; i < data.length; i++) {
        //如果是第一条记录（索引为０），向数组中加入１，并设置索引位置
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0; //spanArr的索引
        } else {
          //如果不是第一条记录，则判断它与前一条记录是否相等
          //根据相同 扣分类别名称 进行合并,根据需要可进行修改
          if (data[i].detailTypeGroup === data[i - 1].detailTypeGroup) {
            //如果相等，则向spanArr中添入元素0，并将前一位元素＋１，表示合并行数＋１
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },

禁止选中

  <el-table
            border
            class="customer-no-border-table"
            element-loading-text="数据正在加载中..."
            :row-class-name="tableRowClassName"
            :header-cell-style="{ background: '#E7F2FD', color: '#252525' }"
            style="width: 100%; border-top: 1px solid #409eff"
            v-loading="centerLoading"
            ref="centerTable"
            :data="centerTable"
            highlight-current-row
            height="400"
            :row-key="rowKey"
            @row-click="getItemCenter"
            :header-cell-class-name="cellClass"
          >
            <el-table-column
              align="center"
              :resizable="false"
              :render-header="renderHeader"
              width="55"
            >
              <template #default="scope">
                <el-checkbox
                  v-model="scope.row.checked"
                  @change="select(scope.row)"
                  :disabled="disabled()"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="硬件类型"
              prop="deviceDictCodeStr"
              align="center"
            ></el-table-column>
            <div slot="empty">
              <img
                alt="暂无数据"
                src="@/assets/noReport.png"
                style="margin-top: 80px"
              />
            </div>
          </el-table>

computed: {
    cellClass() {
      if (
        (this.leftItem.detailTypeGroup == 11 && this.leftItem.flagIndex == 0) ||
        (this.leftItem.detailTypeGroup == 12 && this.leftItem.flagIndex == 0)
      ) {
        return "DisableSelection";
      }
    },
  },
methods:{
 // 控制选择硬件的多选框能否被点击
    disabled() {
      // 有一键设置的时候, 不能编辑下面的厂商;
      if (
        (this.leftItem.detailTypeGroup == 11 && this.leftItem.flagIndex == 0) ||
        (this.leftItem.detailTypeGroup == 12 && this.leftItem.flagIndex == 0)
      ) {
        return true;
      } else {
        return false;
      }
    }
}

完整代码：

<template>
  <div>
    <div class="bigBox">
      <div class="leftBox">
        <div class="title">
          <div class="img">
            <img src="@/assets/upgradeObject.png" alt="升级对象" />
          </div>
          <div class="text">升级对象</div>
        </div>
        <el-form :inline="true" class="searchBox">
          <el-form-item>
            <el-input
              v-model.trim="upgradeObject"
              placeholder="请输入升级对象"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" class="searchBut" @click="searchLeftTable"
              >搜 索</el-button
            >
          </el-form-item>
        </el-form>
        <div class="leftTable">
          <el-table
            border
            class="customer-no-border-table"
            element-loading-text="数据正在加载中..."
            :row-class-name="tableRowClassName"
            :header-cell-style="{ background: '#E7F2FD', color: '#252525' }"
            style="width: 100%; border-top: 1px solid #409eff"
            :cell-style="{ borderColor: '#1890ff' }"
            v-loading="leftLoading"
            ref="leftTable"
            :data="leftTable"
            @row-click="getItem"
            highlight-current-row
            height="400"
            :span-method="objectSpanMethod"
          >
            <el-table-column
              prop="detailTypeGroupStr"
              align="center"
              width="100"
            >
            </el-table-column>
            <el-table-column
              label="升级对象"
              prop="detailTypeStr"
              align="center"
            >
              <template slot-scope="{ row, $index }">
                <div
                  style="
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                  "
                >
                  <div>{{ row.detailTypeStr }}</div>
                  <div>
                    <el-button
                      type="primary"
                      size="small"
                      style="margin-left: 20px"
                      v-if="
                        (row.flagIndex !== 0 && row.detailTypeGroup === 11) ||
                        (row.flagIndex !== 0 && row.detailTypeGroup === 12)
                      "
                      @click="oneClickSet(row)"
                      >一键同步</el-button
                    >
                  </div>
                </div>
              </template>
            </el-table-column>
            <div slot="empty">
              <img
                alt="暂无数据"
                src="@/assets/noReport.png"
                style="margin-top: 80px"
              />
            </div>
          </el-table>
        </div>
      </div>
      <div v-if="isShow" class="rightBox">
        <div class="centerTable">
          <div class="title">
            <div class="img">
              <img src="@/assets/hardwareType.png" alt="硬件类型" />
            </div>
            <div class="text">硬件类型</div>
          </div>
          <el-form :inline="true" class="searchBox">
            <el-form-item>
              <el-input
                v-model.trim="hardwareType"
                placeholder="请输入硬件类型"
                clearable
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                class="searchBut"
                @click="searchCenterTable"
                >搜 索</el-button
              >
            </el-form-item>
          </el-form>
          <el-table
            border
            class="customer-no-border-table"
            element-loading-text="数据正在加载中..."
            :row-class-name="tableRowClassName"
            :header-cell-style="{ background: '#E7F2FD', color: '#252525' }"
            style="width: 100%; border-top: 1px solid #409eff"
            v-loading="centerLoading"
            ref="centerTable"
            :data="centerTable"
            highlight-current-row
            height="400"
            :row-key="rowKey"
            @row-click="getItemCenter"
            :header-cell-class-name="cellClass"
          >
            <el-table-column
              align="center"
              :resizable="false"
              :render-header="renderHeader"
              width="55"
            >
              <template #default="scope">
                <el-checkbox
                  v-model="scope.row.checked"
                  @change="select(scope.row)"
                  :disabled="disabled()"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="硬件类型"
              prop="deviceDictCodeStr"
              align="center"
            ></el-table-column>
            <div slot="empty">
              <img
                alt="暂无数据"
                src="@/assets/noReport.png"
                style="margin-top: 80px"
              />
            </div>
          </el-table>
        </div>
        <div class="rightTable" v-if="isShowRight">
          <div class="title">
            <div class="img">
              <img src="@/assets/factoryName.png" alt="厂商名称" />
            </div>
            <div class="text">厂商名称</div>
          </div>
          <el-table
            border
            class="customer-no-border-table"
            element-loading-text="数据正在加载中..."
            :row-class-name="tableRowClassName"
            :header-cell-style="{ background: '#E7F2FD', color: '#252525' }"
            style="width: 100%; border-top: 1px solid #409eff"
            v-loading="rightLoading"
            ref="rightTable"
            :data="rightTable"
            height="400"
          >
            <el-table-column
              label="厂商名称"
              prop="factoryDictCodeStr"
              align="center"
            ></el-table-column>
            <div slot="empty">
              <img
                alt="暂无数据"
                src="@/assets/noReport.png"
                style="margin-top: 80px"
              />
            </div>
          </el-table>
        </div>
        <div v-else style="margin: auto">
          <img
            src="@/assets/selectUpgrdeObject.png"
            alt="请选择硬件类型进行配置"
          />
          <div style="text-align: center">请选择硬件类型进行配置</div>
        </div>
      </div>
      <div v-else style="margin: auto">
        <img
          src="@/assets/selectUpgrdeObject.png"
          alt="请选择升级对象进行配置"
        />
        <div style="text-align: center">请选择升级对象进行配置</div>
      </div>
    </div>

    <div style="position: fixed; right: 40px">
      <el-button
        type="primary"
        @click="save"
        style="height: 30px; width: 78px; padding: 0; line-height: 30px"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script>
import {
  getBasicDataDictList,
  getDetailTypeList,
  getModuleList,
  getFactoryList,
  saveDetailTypeModuleLink,
} from "_config/url.js";
export default {
  props: ["power"],
  data() {
    return {
      upgradeObject: "", //升级对象
      hardwareType: "", //硬件类型

      leftTable: [],
      centerTable: [],
      rightTable: [],

      leftLoading: false,
      centerLoading: false,
      rightLoading: false,

      isShow: false,
      isShowRight: false,
      leftItem: "", //左边表格的选中行
      centerItem: "", //中间表格的选中行
      powerType: "", //功率code
      spanArr: [], //每行合并数
      pos: 0, //角标索引
      isCheckAll: false,
      isIndeterminate: false,
      centerTableNoCondition: [],
    };
  },
  computed: {
    cellClass() {
      if (
        (this.leftItem.detailTypeGroup == 11 && this.leftItem.flagIndex == 0) ||
        (this.leftItem.detailTypeGroup == 12 && this.leftItem.flagIndex == 0)
      ) {
        return "DisableSelection";
      }
    },
  },
  mounted() {
    this.getOptions();
  },
  methods: {
    // 控制选择硬件的多选框能否被点击
    disabled() {
      // 有一键设置的时候, 不能编辑下面的厂商;
      if (
        (this.leftItem.detailTypeGroup == 11 && this.leftItem.flagIndex == 0) ||
        (this.leftItem.detailTypeGroup == 12 && this.leftItem.flagIndex == 0)
      ) {
        return true;
      } else {
        return false;
      }
    },
    // 一键同步
    oneClickSet(row) {
      let group = row.detailTypeGroup;
      this.leftTable = this.leftTable.map((item, i) => {
        if (item.detailTypeGroup === group) {
          return {
            ...item,
            deviceCodeList: row.deviceCodeList,
          };
        } else {
          return item;
        }
      });
    },
    // 合并行
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    getSpanArr(data) {
      // data就是我们从后台拿到的数据
      for (let i = 0; i < data.length; i++) {
        //如果是第一条记录（索引为０），向数组中加入１，并设置索引位置
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0; //spanArr的索引
        } else {
          //如果不是第一条记录，则判断它与前一条记录是否相等
          //根据相同 扣分类别名称 进行合并,根据需要可进行修改
          if (data[i].detailTypeGroup === data[i - 1].detailTypeGroup) {
            //如果相等，则向spanArr中添入元素0，并将前一位元素＋１，表示合并行数＋１
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    //获取字典项
    getOptions() {
      this.$fetch(getBasicDataDictList)
        .then((res) => {
          if (res.code == 200) {
            this.optionsPowerType = res.data.powerTypeDict; //功率类型

            const foundItem = this.optionsPowerType.find(
              (i) => i.name == this.power
            );
            this.powerType = foundItem ? foundItem.code : "";
            this.searchLeftTable();
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          this.errorMessage(err);
        });
    },
    // 左边表格选中
    getItem(val) {
      // console.log("

标签：el,return,res,leftItem,error,table,false,选框,row	

From： https://www.cnblogs.com/hxy--Tina/p/18318562