博客

element

最近在APP上使用了element的表格，原因是vant上没table组件，所以在element的基础上简单的封装了一个组件

组件 tableElem.vue

<template >
  <el-table
    id="immunityTadle"
    size="mini"
    :data="tableData"
    border
    :max-height="clientHeight"
    style="width: 100vw"
    @row-click="handleClick"
  >
    <!-- fixed  ==> 左边定位传true，右边定位传right; Type: String  -->
    <!-- //sortable  ==> 传true 有排序按钮 Type: Number -->
    <!-- align	对齐方式		left/center/right	Type String -->

       <!-- 对数量进项排序 -->
      <!-- :sort-method="(a, b) => sortHandle(a, b,item.sortType)" -->
    <el-table-column
      v-for="(item, index) in propList"
      :key="index"
      :align="item.align  ? item.align : 'left'"
      :sortable="item.sortable ? true : false"
      :fixed="
        item.fixed == 'true' ? true : item.fixed == 'right' ? 'right' : false
      "
      :prop="item.prop"
      :width="item.width"
      :label="item.label"
    ></el-table-column>
    <!-- :width="item.width" -->
    <el-table-column label="操作" width="80" v-if="isShow">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <!-- <el-button type="text" size="small">编辑</el-button> -->
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  //propList   列的信息
  //tableData   表格的信息
  //isShow  是否显示编辑
  //clientHeight  高度  固定列得话必传  否则出现问题
  // /align 默认左  type strinng  center right left
  /*
     <table-elem
     :clientHeight="clientHeight"
     :isShow="isShow"
     :propList="propList"
     :tableData="tableData"
     @clickRow="clickRow"
     ></table-elem>
    //使用计算属性计算

    //50：单元格的高  40：thead的高    242： 当前页面表格上方的高（变量）
    computed: {
    clientHeight() {
            return this.tableData.length * 50 + 40 + 242 > window.screen.height
        ? window.screen.height - 242
        : this.tableData.length * 50 + 40
    }
  }

  使用分页加载的方式  属性：clientHeight    方法 getPullPageBottom   必传
   getPullPageBottom 父级对的方法
  */
  props: ['propList', 'tableData', 'isShow', 'clientHeight'],
  data() {
    return {}
  },
  methods: {
    //对数量进行排序
    // sortHandle(a, b, sortType) {
    //   if (!sortType) return
    //   return a[sortType] - b[sortType]
    // },
    //点击当前行信息 传给父组件
    handleClick(row) {
      this.$emit('clickRow', row)
    },
    pullScrollFun() {
      if (!this.$listeners['getPullPageBottom']) return
      let tableTbodyDom = document
        .getElementById('immunityTadle')
        .getElementsByClassName('el-table__body-wrapper')[0]
      let that = this
      let timer = true
      tableTbodyDom.addEventListener('scroll', function() {
        if (
          tableTbodyDom.scrollHeight -
            tableTbodyDom.scrollTop -
            this.clientHeight <=
          2
        ) {
          if (timer == true) {
            that.$emit('getPullPageBottom')
            timer = false
            setTimeout(() => {
              timer = true
            }, 1500)
          }
        }
      })
    }
  },
  mounted() {
    this.pullScrollFun()
  }
}
</script>
<style lang="less">
#immunityTadle::-webkit-scrollbar {
  width: 0 !important;
}
#immunityTadle {
  z-index: 0;
  height: 100%;
  overflow: auto !important;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  thead tr {
  }
  thead tr th {
    padding: 0;
    font-size: 12px;
    color: #4b4f4d;
    border: none;
    border-bottom: 1px solid #e9e9e9;
    .cell {
      text-align: center;
      word-break: normal;
      height: 40px;
      line-height: 40px;
    }
  }
  tbody tr td {
    padding: 0;
    font-size: 12px;
    color: #222;
    border: none;
    .cell {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 50px;
      line-height: 50px;
    }
  }
}
.el-table {
  overflow-y: scroll;
}
.el-table::before {
  height: 0px !important;
}
</style>
<style lang="less" scoped>
// /deep/ thead tr {
//   padding: 2px 0 !important;
//   text-align: center;
// }
// /deep/ .el-table tr td {
//   padding: 2px !important;
// }
// /deep/.el-table thead tr th {
//   height: 40px !important;
//   min-width: 50px !important;
//   // padding: 2px 0 !important;
//   font-size: 14px;
//   text-align: center;
// }
// /deep/ tbody tr {
//   padding: 1px !important;
//   text-align: center;
//   td {
//     padding: 1px !important;
//     text-align: center;
//     .cell {
//       // height: 30px !important;
//       padding: 1px !important;
//       font-size: 14px;
//     }
//   }
// }
</style>

引入组件

import TableElem from '@C/immunityCom/tableElem'

注册

  components: {
    TableElem
  },

使用：

    <table-elem
        :clientHeight="clientHeight"
        :isShow="isShow"
        :propList="propList"
        :tableData="tableData"
        @clickRow="clickRow"
        @getPullPageBottom="getPullPageBottom"
      ></table-elem>

      propList: [
        {
          prop: 'animalType',
          label: '种类',
          width: '80',
          fixed: 'true',
          align: 'center',
        },
        { prop: 'immuneDate', label: '时间', width: '100', sortable: true },
        { prop: 'vaccineType', label: '种类', width: '130' },
        {
          prop: 'annimateOughtCount',
          label: '数量A',
          width: '100',
          // sortable: true,
          align: 'center',
          // sortType:"oughtCount"
        },
        {
          prop: 'annimateCount',
          label: '数量B',
          width: '100',
          // sortable: true,
          align: 'center',
          // sortType:"count"
        },
      ],
      tableData:[] //具体数据 字段名要和propList 的prop一致