wt_project_web_bak/src/views/resource/component/xtable.vue

<template>
  <div>
    <div class="flex flex-center flex-justify-between border-bottom">
      <div v-for="header in headers" :key="header.id" class="mt-20 full-width">
        <div
          v-if="header.label === '操作' && showMenu"
          class="padding-top padding-bottom"
          style="width: 280px"
        >
          {{ header.label }}{{ showMenu }}
        </div>
        <div
          v-else
          class="menu flex flex-center"
          :style="header.width ? `width:` + header.width + `px` : ''"
        >
          {{ header.label }}
        </div>
      </div>
    </div>
    <div class="full-width">
      <div v-if="data.length !== 0">
        <div
          v-for="row in data"
          :key="row.id"
          class="flex flex-center row pointer"
        >
          <div
            v-for="(prop, index) in headers"
            :key="prop.id"
            class="flex-child-average flex"
          >
            <div
              v-if="prop.label === '操作' && showMenu"
              class="nowrap menu flex flex-center light-blue-bg"
              style="width: 280px"
            >
              <el-button type="primary" size="small" text>查看</el-button>
              <el-button type="primary" size="small" text>归档</el-button>
              <el-button type="primary" size="small" text>重命名</el-button>
              <move />
            </div>
            <div
              v-else
              class="row full-width"
              :style="`min-width:` + prop.width + `px`"
            >
              <div class="cell flex flex-center full-width">
                <row1
                  :row="row"
                  :column="prop"
                  :index="index"
                  @click="rowClick(row)"
                ></row1>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="mt-20">
        <el-empty v-if="loading === false" description="暂无数据"></el-empty>
        <el-skeleton v-else :rows="20" animated />
      </div>
    </div>
  </div>
</template>

<script>
import row1 from '@/views/resource/component/row1.vue'
import move from '@/views/resource/component/move.vue'

export default {
  components: {
    row1,
    move
  },
  props: {
    data: {
      type: Array,
      default: null
    },
    option: {
      type: Object,
      default: null
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    option: {
      handler(val) {
        this.headers.length = 0
        const menu = {
          label: '操作'
        }
        console.log(this.option.showMenu)
        this.showMenu = this.option.showMenu
        this.headers = val.column
        if (this.headers.findIndex(e => e.label === '操作') === -1) {
          this.headers.push(menu)
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      showMenu: true,
      headers: []
    }
  },
  methods: {
    rowClick(row) {
      this.$emit('row-click', row)
    }
  }
}
</script>

<style lang="scss" scoped>
.row {
  min-height: 40px;
}

.row:hover {
  min-height: 40px;
  background-color: #f7f9fc;
}

.cell {
  min-height: 45px;
}

.menu {
  display: flex;
  flex: 1;
  height: 45px;
  border-bottom: #f7f8fa solid 1px;
}
</style>