vue项目封装elementUI的el-table列表

基于vue/cli3.0+脚手架搭建Vue项目(16)

---

---

前言

这一秒才是最年轻的自己

---

一、封装el-table目的

在整个系统里，使用统一的table列表规则和样式，进行规范，方便页面开发

二、封装el-table公共组件的代码编写

<template>
    <div>
        <el-table
            :data="tableBody"
            style="width: 100%">
            <el-table-column type="selection"></el-table-column>
            <template v-for="(item,index) in tableHeader">
                <el-table-column
                    :prop="item.prop"
                    :label="item.label"
                    :key="index">
                    <template v-slot="scope" v-if="item.propKey">
                        <slot :name="item.propKey" v-bind:scope="scope.row" v-bind:scopeIndex="scope.$index"></slot>
                    </template>
                    <template v-slot:header>
                        <span @click='handleSort(item)' :class='{"set-hover":item.sort}'>
                            {{item.label}}
                        </span>
                        <span class='sort-view' v-if='item.sort' @click='handleSort(item)'>
                            <span class='el-icon-caret-top' :class='(sortActive == "asc"&&sortName==item.prop) ? "headerSortActive" : "resetActive"'  ></span>
                            <span class='el-icon-caret-bottom' :class='(sortActive == "desc"&&sortName==item.prop) ? "headerSortActive" : "resetActive"'></span>
                        </span>
                        <slot :name="item.prop" v-bind:scope="item" ></slot>
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <slot></slot>
    </div>
</template>
  <script>
    export default {
        props: {
            tableData: {
                type: Object,
                default: {
                    tableHeader: [],
                    tableData: []
                }
            }
        },
      data() {
        return {
          sortActive:'', //desc, asc, ''
          sortName: ''  ,  //用来判断排序的激活状态的变量
        }
      },
      created() {
          this.tableHeader =this.tableData.tableHeader
          this.tableBody =this.tableData.tableData
      },
      methods: {
          handleSort(item) {
              this.sortName =item.prop
              this.sortActive = this.sortActive ? (this.sortActive ==='desc' ? 'asc' :'') :'desc'
              this.$emit('sortBy', item, this.sortActive)
          },
      }
    }
  </script>
  <style lang="scss" scoped>
    .set-hover:hover {
        cursor:pointer;
    }
    .sort-view{
        display: inline-block;
        vertical-align: middle;
        padding-left: 0px;
        cursor: pointer;
        height: 20px;
    }
    .sort-view span{
        display: block;
        width: 20px;
        height: 10px;
        line-height: 10px;
        text-align: center;
        color: #999;
        font-size: 12px;
        transform: scale(0.9);
        margin-bottom: -3px;
        padding-left: 0px!important;
    }
    .sort-view span:hover{
        cursor: pointer;
        color:#415fff;
    }
    .headerSortActive{
        color:#415fff !important; 
    }
    .resetActive{
        color:#999 !important;
    }
  </style>

后续可以再根据自己的需要，来丰富组件的内容

三、页面验证

<template>
  <div class="personnel">
    <div class="table">
      <common-table :table-data="personnelData" @sortBy="sortBy">
        <template slot="addressKey" slot-scope="{ scope }">
          <el-input v-model="scope.address" :placeholder="'请输入'" />
        </template>
      </common-table>
    </div>
  </div>
</template>
<script>
import commonTable from '@/components/achive-table';
export default {
  components: {
    commonTable,
  },
  data() {
    return {
      tableHeader: [
        {
          prop: 'date',
          label: '日期',
          sort: 'true',
        },
        {
          prop: 'name',
          label: '姓名',
        },
        {
          prop: 'address',
          propKey: 'addressKey',
          label: '地址',
        },
      ],
      tableData: [
        {
          date: '2021',
          name: '小明',
          address: '',
        },
        {
          date: '2022',
          name: '小花',
          address: '',
        },
      ],
    };
  },
  computed: {
    personnelData() {
      return {
        tableHeader: this.tableHeader,
        tableData: this.tableData,
      };
    },
  },
  methods: {
    sortBy(item, sortType) {
      console.log(item, sortType);
    },
  },
};
</script>
<style lang="scss" scoped>
.personnel {
  padding: 16px;
}
</style>

---

总结

做好现在，勿惧将来。