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">
      <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" :class="{ themetxt: sub.fontweight }" :key='j' :style="{textAlign:item.textAlign, width:sub.width ? sub.width+'px':(100/header.length)+'%'}">
          <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: [
    // 每一项可配置textAlign
    'data',
    // 表头数据：各列名称和格列的配置（fontweight: Boolean，某一列是否是关键列；canclick: Booean, 是否可进行各种操作；）。
    'header',
    // 是否显示复选框
    'selection',
    // 是否显示每行之间的分隔线
    'showLine'
  ],
  data () {
    return {
      innerW: window.innerWidth,
      selectAll: false,
      lock: true
    }
  },
  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: {
    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 () {
  }
}
</script>

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