xiaoshi_system/src/views/event/components/view/mergeTable.vue

<template>
  <div>
    <el-table :data="commonData" header-row-class-name="custom-table-header" @expand-change="expandChange"  @sort-change="sortChange">
      <el-table-column type="expand">
        <template slot-scope="props">
          <div style="padding: 10px;height: 340px;">
            <Table  :column="column" :tableData="props.row.data"  @option="handleOption" :row="{row:props.row,groupBy:groupBy,searchOption:searchOption,}" v-bind="$attrs" v-on="$listeners"/>
          </div>
        </template>
      </el-table-column>
      <el-table-column v-for="column in groupingOption.filter(item=> {return item.value == groupBy})" :key="column.value" :label="column.name" :prop="column.value" sortable="custom"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <div>
            {{ scope.row.name?scope.row.name:'--' }}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
  
<script>
import Table from "./table";

export default {
  props: {
    // 检索条件
    searchOption: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 分组的栏位
    groupingOption: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 分组的值
    groupBy:String,
    commonData: Array,
    column: {//显示栏位管理数组
      type: Array,
      default: () => {
        return [
          {
            ifGroup: false,
            ifSearch: true,
            name: "事件名称",
            type: "String",
            value: "name",
          },
          {
            name: "创建人",
            type: "String",
            value: "createName",
            ifSearch: true,
            ifGroup: false
          },
          {
            name: "创建时间",
            type: "DateTime",
            value: "createTime",
            ifSearch: true,
            ifGroup: true
          },
          {
            name: "发生时间",
            type: "DateTime",
            value: "eventDate",
            ifSearch: true,
            ifGroup: true
          },
          {
            name: "描述",
            type: "String",
            value: "description",
            ifSearch: true,
            ifGroup: false
          },
          {
            name: "应用场景",
            type: "Integer",
            value: "scenarioId",
            ifSearch: true,
            ifGroup: true
          }
        ]
      }
    }
  },
  mixins: [],
  components: {
    Table
  },
  data() {
    return {
      // columnList: [],
      tableData: [],
      showData: [],
      expandList: [],

      sort:[],
    }
  },
  watch: {
  },
  mounted() {
    
  },
  methods: {
    // 排序
    sortChange({ column, prop, order }) {
      let str='1'
      this.$emit('on-sort',{ column, prop, order ,str})
    },
    //操作列事件
    handleOption(data) {
      this.$emit('option', data)
    },
    //打开展开行获取数据并保存起来
    expandChange(row, expandedRows) {
      row.data = []
    }
  }
}
</script>