vue使用element-ui table表格二次封装

vue使用element-ui table表格二次封装 方便基本表格展示数据  不需要在每个页面当中都写很多的html代码。

下面上代码：

components中创建v-table.vue

<template>
  <div v-loading="tableLoading" class="table" :class="{'table-padding': pageinationPosition}">
    <el-table ref="multipleTable" :data="data" :tooltip-effect="tooltipEffect ? 'dark' : ''" :max-height="maxHeight != null ? maxHeight : null" :height="height!=null ? height : null" :highlight-current-row="highlightCurrentRow" style="width: 100%" :header-row-style="{color: '#333333', fontSize: '16px', fontWeight: 600}" @selection-change="handleSelectionChange" @current-change="handleCurrentChange">
      <el-table-column v-if="tooltipEffect" type="selection" width="55">
      </el-table-column>
      <el-table-column v-for="(item, index) in cloumns" :key="index" :prop="item.prop" :label="item.label" :width="item.width" :align="item.align ? item.align : ''" :fixed="item.fixed ? item.fixed : null">
        <template slot-scope="scope">
          <div v-if="item.type == 'text'" class="table-text">
            {{ scope.row[item.prop }}
          </div>
          <div v-else-if="item.type == 'popover'" class="table-btns">
            <el-popover placement="top-start" :title="item.title ? item.title : ''" width="200" :trigger="item.trigger ? item.trigger : 'hover'" :content="scope.row[item.prop]">
              <p slot="reference" class="text-overflow">{{ scope.row[item.prop] }}</p>
            </el-popover>
          </div>
          <div v-else-if="item.type == 'options'" class="table-btns">
            <el-button v-for="(btn, btnKey) in item.options" :key="btnKey" :type="btn.type && btn.type !== '' ? btn.type : 'primary'" :icon="btn.icon ? btn.icon : ''" @click="btn.clickEvent(scope.row)">{{ btn.text }}</el-button>
          </div>
          <div v-else-if="item.type == 'router'" class="table-router">
            <el-button type="text" $router.push({ path: item.path, query: {} })>{{ item.text }}</el-button>
          </div>
          <div v-else-if="item.type == 'slot'" class="table-slot">
            <slot :name="item.slot" :row="scope.row" :column="item.prop" :index="scope.$index"></slot>
          </div>
        </template>
        <template v-if="isShowRefresh && index === (cloumns.length - 1)" slot="header">
          <div class="header-option flex-item-center">
            <p>{{ item.label }}</p>
            <i class="el-icon-refresh" @click="refresh"></i>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-if="showpagination" :page-sizes="[10, 50, 100]" class="pageination" :class="{'position-fixed': pageinationPosition}" :layout="pageination" :current-page="page" :page-size="size" :total="total" @size-change="currentSizeChange" @current-change="currentChange">
    </el-pagination>
  </div>
</template>

<script>

export default {
  props: {
    // 表格数据
    data: {
      type: Array,
      default: () => [],
      require: true
    },
    // 表头数组
    cloumns: {
      type: Array,
      default: () => [],
      require: true
    },
    // 总条数
    total: {
      type: Number,
      default: () => 0,
      require: true
    },
    // 分页默认功能
    pageination: {
      type: String,
      default: () => 'total, prev, pager, next, jumper'
    },
    // 每页显示条数
    size: {
      type: Number,
      default: () => 10
    },
    // 当前页
    page: {
      type: Number,
      default: () => 1,
      require: true
    },
    // 是否显示分页
    showpagination: {
      type: Boolean,
      default: () => true
    },
    // 是否显示表格多选
    tooltipEffect: {
      type: Boolean,
      default: () => false
    },
    // 固定分页到页面底部 默认不固定
    pageinationPosition: {
      type: Boolean,
      default: () => false
    },
    // 是否单选
    highlightCurrentRow: {
      type: Boolean,
      default: () => false
    },
    // 列表加载状态
    tableLoading: {
      type: Boolean,
      default: () => false
    },
    // 表格高度
    height: {
      type: String,
      default: () => null
    },
    // 表格最大高度
    maxHeight: {
      type: String,
      default: () => null
    },
    // 是否显示刷新列表按钮
    isShowRefresh: {
      type: Boolean,
      default: () => false
    }
  },
  methods: {
    // 表头样式
    headerRowStyle() {
      return 'font-size: 16px;font-weight: 600;color: #333333'
    },
    // 切换当前页
    currentChange(page) {
      this.$emit('handleChange', page)
    },
    // 选中表格数据
    handleSelectionChange(arr) {
      this.$emit('handleSelectionChange', arr)
    },
    // 当前页显示条数
    currentSizeChange(size) {
      this.$emit('handleSizeChange', size)
    },
    // 跳转到第几页
    handleCurrentChange(currentRow) {
      this.$emit('currentChange', [currentRow, true])
    },
    // 刷新表格数据
    refresh() {
      this.$emit('tableRefresh', true)
    }
  }
}
</script>

<style lang="scss">
.table {
  position: relative;
  text-align: right;
  &.table-padding {
    padding-bottom: 26px;
  }
}
.pageination {
  &.position-fixed {
    position: fixed;
    right: 15px;
    bottom: 15px;
    background: #ffffff;
  }
}
.header-option {
  i {
    margin-left: auto;
    font-size: 20px;
    cursor: pointer;
    color: #409eff;
  }
}
</style>

可以在main.js中全局引入

import Vue from 'vue'
import VTable from '@/components/v-table'


Vue.component('v-table', VTable)

 然后在页面中使用

1.基本的使用

在使用中可以根据表格要展示的类型进行不同的显示

如果比较复杂的显示 可以使用slot类型进行特殊逻辑的处理

<template>
  <div class="page">
    <v-table :data="list" :cloumns="cloumns" :size="size" :total="total" :tooltip-effect="true" :page="page" is-show-refresh @handleSelectionChange="handleSelectionChange" @handleChange="handleChange" @tableRefresh="refresh">
      <template slot="sex" slot-scope="scope">
        {{ scope.row.sex == 1 ? '男' : '女' }}
      </template>
    </v-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      size: 10,
      list: [],
      total: 0,
      cloumns: [{
        prop: 'name',
        label: '姓名',
        type: 'text'
      }, {
        prop: '',
        label: '性别',
        type: 'slot',
        slot: 'sex'
      }, {
        prop: 'age',
        label: '年龄',
        type: 'text'
      }, {
        prop: '',
        label: '操作',
        type: 'options',
        width: 100,
        align: 'center',
        options: [{
          text: '详情',
          icon: 'el-icon-edit',
          type: 'primary',
          clickEvent: (row) => {
            console.log(row)
          }
        }],
        fixed: 'right'
      }],
      tableSelectArr: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData () {
    // 获取数据的代码逻辑 这里就不写了
        this.list = [{
            name: '小明',
            sex: 1,
            age: 25
        },{
            name: '小红',
            sex: 2,
            age: 23
        },{
            name: '小李',
            sex: 1,
            age: 26
        }]
        this.total = 30
    },
    handleChange (page) {
        this.page = page
        this.getData()
    },
    handleSelectionChange(arr) {
      console.log(arr)
      this.tableSelectArr = arr
    },
    refresh() {
      this.page = 1
      this.getData()
    }
  }
}
</script>

<style>
</style>

转载注明原创作者：vue element-ui el-table表格二次封装 自定义el-table表格 vue封装表格组件