FD_Pano/src/components/table/index.vue

<template>
  <div class="table-layout">
    <!-- 表头 -->
    <ul class="t-header" :class="{'bottom-line':showLine}">
      <!-- 复选框 -->
      <li v-if="selection" class="check-cls"><span @click="lock=false,selectAll=!selectAll" class="fdcheck" :class="{check_active:selectAll}"></span></li>
      <!--  -->
      <li v-for="(item,i) in header" :key="i" :style="{textAlign: item.textAlign, width:item.width ?item.width+'px':(100/header.length)+'%'}">
        <slot :data='item' name='header'></slot>
      </li>
    </ul>
    <!-- 表格内容区域 -->
    <div class="t-con"
      v-infinite-scroll="requestMoreData"
      :infinite-scroll-disabled="!canRequestMoreData"
      ref="t-con"
      :style="`margin-right: ${hasScrollBar ? -6 : 0}px`"
    >
      <ul class="t-item" active-txt :class="{'bottom-line': showLine}" v-for="(item, i) in fixdata" :key="i">
        <!-- 复选框 -->
        <li v-if="selection" class="check-cls" ><span @click="selectItem(item,i)" class="fdcheck" :class="{check_active:item.hasAuth}"></span></li>
        <!--  -->
        <li
          v-for="(sub,j) in header"
          :key='j'
          :style="{textAlign:item.textAlign, width:sub.width ? sub.width+'px':(100/header.length)+'%'}"
          :class="{ themetxt: sub.fontweight, showWhenHover: sub.showWhenHover }"
          :title="sub.key === 'name'?  item[sub.key]: ''"
        >
          <slot :data='item[sub.key]' :item="item"  :sub='sub' name='item'></slot>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  props: {
    canRequestMoreData: {
      type: Boolean,
      default: true
    },
    data: {
      type: Array,
      default: Array
    },
    /**
     * 表头数据：各列名称和配置
     * fontweight: Boolean，某一列是否是关键列,会加粗显示
     * showWhenHover: Boolean,是否只在hover到这一行时才显示这一列在该行的数据
     * canclick: Booean, 是否可点击进行各种操作
     * width: Number,该列宽度
     * textAlign: css属性值
     */
    header: {
      type: Array,
      default: Array
    },
    // 是否显示复选框
    selection: {
      type: Boolean,
      defaut: false
    },
    // 是否显示每行之间的分隔线
    showLine: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      selectAll: false,
      lock: true,
      hasScrollBar: false,
    }
  },
  computed: {
    ...mapState({
      // props中data中hasAuth一律写成false，即未选中。
      fixdata () {
        let data = this.data && this.data.map(item => {
          item.hasAuth = false
          return item
        })
        return data
      }
    })

  },
  watch: {
    data () {
      this.selectAll = false
    },
    selectAll: function (newVal) {
      if (!this.lock) {
        this.fixdata.forEach(item => {
          item.hasAuth = newVal
        })
        this.handleSelect()
      }
    }
  },
  methods: {
    requestMoreData() {
      this.$emit('request-more-data')
    },
    handleSelect () {
      let arr = this.fixdata.filter(item => {
        return item.hasAuth
      })
      this.$emit('selection-change', arr)
    },
    selectItem (item, i) {
      item.hasAuth = !item.hasAuth
      this.$set(this.fixdata, i, item)
      this.lock = true
      this.selectAll = true
      this.fixdata.forEach(sub => {
        if (!sub.hasAuth) {
          this.selectAll = false
        }
      })
      this.handleSelect()
    }
  },
  mounted () {
    const resizeObserver = new ResizeObserver((entries) => {
      console.log('asdf');
      if (entries[0].target.clientHeight < entries[0].target.scrollHeight) {
        this.hasScrollBar = true
      } else {
        this.hasScrollBar = false
      }
       
    })
    resizeObserver.observe(this.$refs['t-con'])
  },
}
</script>

<style lang="less" scoped>
@import './style.less';
</style>