Vue Element UI Table 组件 Table表自动生成 Table 封装 (详细教程)

Vue Element UI Table 组件封装

本文提及

Vue http 请求封装包
Element UI Table 分页教程
Vue 组件通信

文章解析

table 组件封装

条件分页获取数据
自定义table 表头
自定义table 权限
自定义字段是否必须
自定义是否自动分页
自定义日期格式
返回响应 修改 查看 删除 操作
返回调用者信息

Template

<template>
  <div class="container-fluid">
    <el-table v-if="pageauto" highlight-current-row border
              :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" class="w-auto">
      <template v-for="(col ,index) in cols">

        <el-table-column v-if="col.type==='String'&&col.dataIdentification===''&&col.hidden!=='true'" :prop="col.prop"
                         :label="col.label"
                         :width="col.width" :sortable="col.sort==='sort'?true:false"
        ></el-table-column>
        <!--date-->
        <el-table-column v-if="col.type==='date'&&col.hidden!=='true'" :prop="col.prop" :label="col.label"
                         :formatter="dateFormat"
                         :sortable="col.sort==='sort'?true:false"
                         :width="col.width"></el-table-column>
        <!--gender-->
        <el-table-column v-if="col.dataIdentification==='gender'&&col.hidden!=='true'" :prop="col.prop"
                         :label="col.label"
                         :sortable="col.sort==='sort'?true:false"
                         :width="col.width">
          <template slot-scope="scope">
            <span>{{scope.row.gender===1?'男':'女'}}</span>
          </template>
        </el-table-column>
      </template>

      <!--jurisdiction-->
      <el-table-column fixed="right" show-overflow-tooltip v-if="jurisdictions" label="操作" width="220">
        <template slot-scope="scope">
          <el-button v-for="(jurisdiction,index) in jurisdictions" v-bind:key="jurisdiction.id"
                     @click="handlejurisdiction(jurisdiction.method,scope.row.id)"
                     type="text"
                     size="small"
          >{{jurisdiction.name}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-table v-if="!pageauto" highlight-current-row
              :data="tableData" class="w-100">
      <template v-for="(col ,index) in cols">
        <el-table-column v-if="col.type==='String'" :prop="col.prop" :label="col.label"
                         :width="col.width" :sortable="col.sort==='sort'?true:false"></el-table-column>
        <el-table-column v-if="col.type==='date'" :prop="col.prop" :label="col.label" :formatter="dateFormat"
                         :sortable="col.sort==='sort'?true:false"
                         :width="col.width"></el-table-column>
      </template>

      <!--jurisdiction-->
      <el-table-column fixed="right" show-overflow-tooltip v-if="this.jurisdictions" label="操作" width="220">
        <template slot-scope="scope">
          <el-button v-for="jurisdiction in jurisdictions"
                     @click="jurisdiction.method(scope.row.id)"
                     type="text"
                     size="small"
          >{{jurisdiction.name}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
	
    <!--page tools toolbar-->
    <el-pagination
      class="mt-2"
      @size-change="handleSizeChange"
      @current-change="handlecurrentPageChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 40,50,100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="40%"
      center
      :close-on-click-modal="false"
      @opened="openedcenterDialogVisible"
      @closed="closedcenterDialogVisible">

   <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
 </el-dialog>

  </div>
</template>

Script

import {get, getp, deletep} from '../../../config/http.js'
  import bus from '../../../src/eventBus.js'

  export default {
    name: 'Table',
    data () {
      return {
        centerDialogVisible: false,
        cols: [],
        cols_hidden: 'false',
        currentPage: 1,
        pageSize: 10,
        total: 0,
        tableData: [],
        jurisdictions: [],
        pageauto: true, 
        useridentification: ''
      } 
    }, methods: {
    // cols 表头   jurisdictions 权限     自动分页 pageauto url 数据地址 params 参数   useridentification 调用者标识
      async custom_table (cols, jurisdictions, pageauto, url, params, useridentification) {
        this.useridentification = useridentification
        this.tableData = ''
        this.cols = cols
        // this.tableData = tableData
        this.jurisdictions = jurisdictions
        this.pageauto = pageauto
        let result = ''
        if (pageauto) {
          if (params && params !== undefined && params.length !== 0 && params !== '' && params != null && params !== false) {
            console.log('有参查询' + params.toString())
            result = await getp(url, params)
          } else {
            console.log('无参查询')
            result = await get(url)
          }
          this.total = result.length
          this.currentPage = 1
          this.tableData = result
          console.log('custom table')
          console.log(this.tableData)
          console.log(this.jurisdictions)
          console.log(this.cols)
          console.log(url)
        } else {
          //手动分页

        }
      },
      handlejurisdiction (functon, data) {
        /* 方法名 数据 调用者*/
        let confrim = window.confirm('确认删除吗')
        if (functon === 'delete') {
          if (confrim) {
            bus.$emit('handlejurisdiction', functon, data, this.useridentification)
          } else {
            this.$message('删除取消')
          }
        } else {
          bus.$emit('handlejurisdiction', functon, data, this.useridentification)
        } 
      }, closedcenterDialogVisible () {
        // alert('关闭窗口')
      }, openedcenterDialogVisible () {
        // alert('打开窗口')
      },
      dateFormat: function (row, column) {
        var date = row[column.property]
        if (date === undefined) {
          return ''
        }
        // moment(date).format('YYYY-MM-DD')
        return date.slice(0, 10)
      }, handleSizeChange (pageSize) {
        this.pageSize = pageSize
        this.currentPage = 1
      }, handlecurrentPageChange (currentPage) {
        this.currentPage = currentPage
      }
    }, beforeDestroy () { 
      bus.$off('handlejurisdiction')
    },
  }
</script>

<style scoped>

</style>