platform-customsdeclaration-ssr/components/base/table/Wtable.vue

<template>
  <div class="table_info">
    <table class="table">
      <thead>
      <tr>
        <th v-for="(item, index) in thead" :width="item.width" :key="index">
          <template v-if="item.name==='全选'">
            <input type="checkbox" id="all" :class="classChickbox" :checked="allDisabled" @click="allcheckbox"><label for="all"></label>全选
          </template>
          <template v-else>
            {{item.name}}
          </template>
        </th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in data1" :key="index" @dblclick="dblClick(item)">
        <td v-for="child in thead" :key="child.id">
          <template v-if="child.id === 'checkbox' && child.name==='全选'">
            <input type="checkbox" :id="index" :class="classChickbox" :checked="item.isDisabled" @click.stop="checkboxClick(item)"><label :for="index"></label>
          </template>
          <template v-else>
            {{item[child.id] ? (child.type === 'date' ? formatDate(item[child.id]) : item[child.id]) : '-'}}
          </template>
        </td>
      </tr>
      <tr v-if="data.length === 0">
        <td :colspan="thead.length" style="line-height:50px;">暂无信息！</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  import {formatDate} from "@/utils/date";
  export default {
    name: 'wtableView',
    props: {
      // 数据加载
      data: {
        type: Array,
        default: []
      },
      // 表头信息
      thead: {
        type: Array,
        // default:　["序号", "编号", "公司"]
        default:　[]
      },
      // 单选框颜色
      classChickbox: {
        type: String,
        default: ''
      }
    },
    methods: {
      // 绑定格式化时间
      formatDate (type) {
        return formatDate(new Date(type), 'yyyy-MM-dd hh:mm:ss')
      },
      // 全选
      allcheckbox () {
        let list = new Array()
        this.allDisabled = !this.allDisabled
        this.data.forEach((value) => {
          value.isDisabled = this.allDisabled
          if (this.allDisabled === true) {
            list.push(value)
          }
        })
        this.$emit('multiple', true, list)
      },
      //单选
      checkboxClick (type) {
        type.isDisabled = !type.isDisabled
        this.isAllCheck()
        this.$emit('clickEvent', type)
      },
      // 是否全选
      isAllCheck () {
        let list = new Array()
        let count = 0
        this.data1.forEach((value) => {
          if (value.isDisabled === true) {count++}
        })
        for (let i = 0; i < this.data1.length; i++) {
          if (this.data1[i].isDisabled === true) {
            list.push(this.data1[i])
          }
        }
        count === this.data1.length ? this.allDisabled = true : this.allDisabled = false
        if (count !== 1) {
          this.$emit('multiple', true, list)
        } else {
          this.$emit('multiple', false, list)
        }
      },
      // 双击事件
      dblClick (type) {
        this.$emit('dblClickEvent', type)
      }
    },
    watch: {
      data: function (newVal) {
        this.data1 = newVal
      }
    },
    data () {
      return {
        data1: this.data,
        allDisabled: false
      }
    }
  }
</script>