VUE2 解决element Ui 表格，展开行与合并行不能通同时使用的问题

 

<template>
<div >
  <div class="detail-content-list">
    <div class="content-list">
      <el-table
        :max-height="350"
        :data="tableData1"
        border
        size="small"
        style="width: 100%"
        :row-class-name="setRowClassName"
        :span-method="objectSpanMethod"
        ref="expandTable"
        @row-click="handleRowClick"
        row-key="id"
        >
        <el-table-column type="expand" width="1">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <div class="expand" ref="myInput">
                <div class="copy" @click="copyClick"><i class="el-icon-copy-document"></i>复制</div>
                <div class="expand-title">主选: </div>
                <div class="expand-text"><div class="showArrow1">采购管理中心总经理意见</div> <div class="showArrow2">
                  {{tableData1[props.row.index -1].projectName.join(',')}}
                </div></div>
                <div class="expand-text"><div class="showArrow1">需求部门总监意见</div> <div class="showArrow2">{{tableData1[props.row.index -1].projectName.join(',')}}</div></div>
                <div class="expand-text"><div class="showArrow1">需求部门总经理意见</div> <div class="showArrow2">{{tableData1[props.row.index -1].projectName.join(',')}}</div></div>
                <div class="expand-text"><div class="showArrow1">公司分管副总意见</div> <div class="showArrow2">{{tableData1[props.row.index -1].projectName.join(',')}}</div></div>
                <div class="expand-title">备选: </div>
                <div class="expand-text"><div class="showArrow1">采购管理中心总经理意见</div> <div class="showArrow2">{{props.row.projectName?props.row.projectName:null}} </div></div>
                <div class="expand-text"><div class="showArrow1">需求部门总监意见</div> <div class="showArrow2">{{props.row.projectName?props.row.projectName:null}}</div></div>
                <div class="expand-text"><div class="showArrow1">需求部门总经理意见</div> <div class="showArrow2">{{props.row.projectName?props.row.projectName:null}}</div></div>
                <div class="expand-text"><div class="showArrow1">公司分管副总意见</div> <div class="showArrow2">{{props.row.projectName?props.row.projectName:null}}</div></div>
              </div>

            </el-form>
          </template>
        </el-table-column>

        <el-table-column width="50" align="center" prop="arrow">
          <template slot-scope="scope">
            <span class="arrow-icon">
              <i :class="scope.row.expanded ? 'el-icon-caret-bottom' : 'el-icon-caret-right'" />
            </span>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in tableColumn1"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          show-overflow-tooltip
        >
          <template slot="header">
            <div v-if="item.required" class="required">
              <span>{{ item.label }}</span>
            </div>
            <span v-else>{{ item.label }}</span>
          </template>
          <template slot-scope="scope">
            <el-tooltip class="item" :disabled="scope.row[item.prop] && scope.row[item.prop].length <1" v-if="item.prop === 'projectName'" effect="dark" :content="scope.row[item.prop]&&scope.row[item.prop].join(',')" placement="top">
              <rc-select
                v-model="scope.row[item.prop]"
                multiple
                collapse-tags
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </rc-select>
            </el-tooltip>
            <el-tooltip class="item" :disabled="scope.row[item.prop] && scope.row[item.prop].length <1" v-else-if="item.prop === 'projectManage'" effect="dark" :content="scope.row[item.prop]&&scope.row[item.prop].join(',')" placement="top">
              <rc-select
                v-model="scope.row[item.prop]"
                multiple
                collapse-tags
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </rc-select>
            </el-tooltip>
          <el-tooltip class="item" :disabled="scope.row[item.prop] && scope.row[item.prop].length <1" v-else-if="item.prop === 'projectManage1'" effect="dark" :content="scope.row[item.prop]&&scope.row[item.prop].join(',')" placement="top">
            <rc-select
              v-model="scope.row[item.prop]"
              multiple
              collapse-tags
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </rc-select>
          </el-tooltip>
          <el-tooltip class="item" :disabled="scope.row[item.prop] && scope.row[item.prop].length <1" v-else-if="item.prop === 'projectManage2'" effect="dark" :content="scope.row[item.prop]&&scope.row[item.prop].join(',')" placement="top">
            <rc-select
              v-model="scope.row[item.prop]"
              multiple
              collapse-tags
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </rc-select>
          </el-tooltip>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</div>
</template>
<script>
const tableColumn1 = [
  {
    prop: "itemCode",
    label: "标段名称",
    checked: true,
  },
  {
    prop: "importTime",
    label: "主选/备选",
    checked: true,
    width: 120,
  },
  {
    prop: "projectName",
    label: "采购管理中心总经理意见",
    checked: true,
    required: true,
    width: 300,
  },
  {
    prop: "projectManage",
    label: "需求部门总监意见",
    checked: true,
    required: true,
    width: 300,
  },

  {
    prop: "projectManage1",
    label: "需求部门总经理意见",
    checked: true,
    required: true,
    width: 300,
  },
  {
    prop: "projectManage2",
    label: "公司分管副总裁意见",
    checked: true,
    required: true,
    width: 300,
  },
];
export default {
  data() {
    return {
      options: [
        {
          value: "黄金糕",
          label: "黄金糕",
        },
        {
          value: "双皮奶",
          label: "双皮奶",
        },
        {
          value: "蚵仔煎",
          label: "蚵仔煎",
        },
        {
          value: "龙须面",
          label: "龙须面",
        },
        {
          value: "北京烤鸭",
          label: "北京烤鸭",
        },
      ],
      tableData1: [
        {
          itemCode: "CS20201208800",
          importTime: "2020-12-08",
          projectName: ["黄金糕", "北京烤鸭"],
          projectManage: ["黄金糕", "北京烤鸭"],
          projectManage1: ["黄金糕", "北京烤鸭"],
          projectManage2: ["黄金糕", "北京烤鸭"],
          level: "TL",
          expanded:false,
          index:0,
          id: 1,
        },
        {
          canEdit: true,
          projectName: ["黄金糕", "北京烤鸭"],
          projectManage: ["黄金糕", "北京烤鸭"],
          projectManage1: ["黄金糕", "北京烤鸭"],
          projectManage2: ["黄金糕", "北京烤鸭"],
          id: 2,
          expanded:false,
          index:1,
        },
        {
          itemCode: "CS20201208811",
          importTime: "2020-12-08",
          projectName: ["黄金糕", "北京烤鸭"],
          projectManage: ["黄金糕", "北京烤鸭"],
          projectManage1: ["黄金糕", "北京烤鸭"],
          projectManage2: ["黄金糕", "北京烤鸭"],
          expanded:false,
          level: "TL",
          index:2,
          id: 3,
        },
        {
          itemCode: "CS20201208822",
          importTime: "2020-12-08",
          expanded:false,
          index:3,
          projectName: ["黄金糕", "北京烤鸭"],
          projectManage: ["黄金糕", "北京烤鸭"],
          projectManage1: ["黄金糕", "北京烤鸭"],
          projectManage2: ["黄金糕", "北京烤鸭"],
          level: "TL",
          id: 4,
        },
      ], // 表格列数据

    };
  },
  mounted() {

  },
  methods: {
    handleRowClick(row,column) {
      console.log("row",row,column);
      if (column.property === 'arrow') {
        this.showArrow = this.tableData1[row.index].projectName.join(',')
        row.expanded = !row.expanded;
        let index = this.tableData1.findIndex((item) => row.id == item.id);
        if (index % 2 == 0) {
          index++;
        }
        console.log(this.tableData1[index], index);
        this.$refs.expandTable.toggleRowExpansion(
          this.tableData1[index],
          row.expanded
        );
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1|| columnIndex === 2) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    copyClick() {
      // const input = this.$refs.myInput
      const text = this.tableData1.map(o=> o.projectName).join(',')
      // console.log("input",input);
      let inputDom = document.createElement('textarea') // js创建一个文本框
      document.body.appendChild(inputDom) //将文本框暂时创建到实例里面
      inputDom.value = text //将需要复制的内容赋值到创建的文本框中
      inputDom.select() //选中文本框中的内容
      inputDom.focus()
      document.execCommand('copy') //执行复制操作
      document.body.removeChild(inputDom) //最后移出
      this.$message.success('复制成功')
    },
    // 设置斑马线颜色
    setRowClassName({ row, rowIndex }) {
      if (rowIndex % 2) {
        return "white-bg";
      } else {
        return "grey-bg";
      }
    },
  },
};
</script>