SZHY2.0/src/views/securityCheck/components/nestTableColumn.vue

<template>
  <a-table-column
    v-if="col.children && col.children.length"
    :prop="col[propName]"
    :label="col[labelName]"
    :width="col.width"
    show-overflow-tooltip
  >
    <NestTableColumn
      v-for="childCol in col.children"
      :key="childCol[propName]"
      :col="childCol"
      :prop-name="propName"
      :label-name="labelName"
    />
  </a-table-column>
  <a-table-column
    v-else
    :prop="col[propName]"
    :label="col[labelName]"
    :width="col.width"
    show-overflow-tooltip
  >
    <template slot-scope="scope">
      <span
        v-if="col.clickHandler"
        class="cell-click"
        @click="col.clickHandler"
        >{{ scope.row[col[propName]] }}</span
      >
      <span v-else>{{ scope.row[col[propName]] }}</span>
    </template>
  </a-table-column>
  <!-- <a-table-column
    :prop="col[propName]"
    :label="col[labelName]"
  >
    <template v-for="childCol in col.children">
      <NestTableColumn
        v-if="childCol.children && childCol.children.length"
        :key="childCol[propName]"
        :col="childCol"
        :prop-name="propName"
        :label-name="labelName"
      />
      <a-table-column
        v-else
        :key="childCol[propName]"
        :prop="childCol[propName]"
        :label="childCol[labelName]"
      >
        <template slot-scope="scope">
          <span
            v-if="childCol.clickHandler"
            class="cell-click"
          >{{ scope.row[childCol[propName]] }}</span>
          <span v-else>{{ scope.row[childCol[propName]] }}</span>
        </template>
      </a-table-column>
    </template>
  </a-table-column> -->
</template>

<script>
export default {
  name: "NestTableColumn",
  props: {
    col: {
      type: Object,
      required: true,
    },
    propName: {
      type: String,
      default: "prop",
    },
    labelName: {
      type: String,
      default: "label",
    },
  },
};
</script>

<style>
</style>