Vue Element UI Table 表自动生成 Table 表封装 2.0（详细教程）

Element UI Table 表封装

文章解析

table 组件封装

条件分页获取数据
自定义table 表头
自定义table 权限
自定义字段是否必须
自定义是否自动分页
自定义日期格式
监听发送权限操作
返回调用者信息
table 数据可视化面板

---

入门必读

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

Template

<template>
<div class="container-fluid">

<div class="container-fluid card" v-show="props.datapanel">
  <h4>table Data</h4>
  <span>
  <ul class="border-secondary-50 p-0 m-0 border" style="list-style: none;" v-for="(prop,index) in props">
    <li class="d-flex flex-row text-left"><span
      class="font-weight-bolder">{{index}}：</span><span>{{prop}}</span></li>
  </ul>
  </span>
</div>
<el-table v-if="!props.selfmotionpage" highlight-current-row border
          :data="!props.selfmotionpage?tableData:tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
          class="w-auto">
  <template v-for="(col ,index) in props.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>
    &lt;!&ndash;date&ndash;&gt;
    <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>
    &lt;!&ndash;gender&ndash;&gt;
    <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>

  &lt;!&ndash;获取权限&ndash;&gt;
  <el-table-column fixed="right" show-overflow-tooltip v-if="props.jurisdictions" label="操作" width="220">
    <template slot-scope="scope">
      <el-button v-for="(jurisdiction,index) in props.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-pagination
  v-if="props.selfmotionpage"
  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-pagination
  v-if="!props.selfmotionpage"
  class="mt-2"
  @size-change="handlemanualSizeChange"
  @current-change="handlemanualcurrentPageChange"
  :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>

</div>
</template>

Script

<script>
import {get, getp} from '../../../config/http.js'
import bus from '../../../src/eventBus.js'
import moment from 'moment'

export default {

name: 'Table',
props: {
  props: {
    url: String,
    params: Object,
    cols: Object,
    jurisdictions: Object,
    selfmotionpage: Boolean,
    uniqueidentification: String,
    datapanel: {type: Boolean, default: false}
  },
}, watch: {
  props: {
    immediate: true,
    handler (val) {
      this.custom_table()
      // console.log('action Value:', val, this.levelPersonal)
    }, deep: true
  }
},
data () {
  return {
    currentPage: 1,
    pageSize: 10,
    total: 0,
    tableData: [],
  }
}, methods: {
  async custom_table () {
    let params = this.props.params
    let result = ''
    if (this.props.selfmotionpage === 'true') {
      if (params && params !== undefined && params.length !== 0 && params !== '' && params != null && params !== false) {
        result = await getp(this.props.url, params)
      } else {
        result = await get(this.props.url)
      }
      this.total = result.length
      this.currentPage = 1
      this.tableData = result
    } else {
      if (params && params !== undefined && params.length !== 0 && params !== '' && params != null && params !== false) {
        console.log('有参查询' + params.toString())
        result = await getp(this.props.url, params)
      } else {
        console.log('无参查询')
        result = await get(this.props.url)
      }
      this.tableData = result.list
      this.currentPage = result.pageNum
      this.pageSize = result.pageSize
      this.total = result.total
    }
  },
  handlejurisdiction (functon, data) {
    this.$nextTick(function () {
      if (functon === 'delete') {
        let confrim = window.confirm('确认删除吗')
        if (confrim) {
          bus.$emit('handlejurisdiction', functon, data, this.props.uniqueidentification)
        } else {
          this.$message('删除取消')
        }
      } else {
        bus.$emit('handlejurisdiction', functon, data, this.props.uniqueidentification)
      }
    })
  },
  dateFormat: function (row, column) {
    var date = row[column.property]
    if (date === undefined || date === '' || date === null || date.length === 0) {
      return ''
    }
    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
  }, handlemanualSizeChange (pageSize) {
    this.pageSize = pageSize
    this.currentPage = 1
    this.$parent.search()
  }, handlemanualcurrentPageChange (currentPage) {
    this.currentPage = currentPage
    this.$parent.search()
  }
}, beforeDestroy () {
  // bus.$off('handlejurisdiction')
},

}
</script>

使用方法

创建 Table.vue
导入代码
在 main.js 中引入

import Table from '@/components/common/Table.vue'

Vue.component('mytable', Table)

实例教程

<template>

    <mytable :props="props"/>

</template>

<script>
 //import tools
  import {get, getp} from '../../../config/http.js'
  import bus from '../../../src/eventBus.js'
  import moment from 'moment'
 

export default{
  name:'component',
  data(){
    return{ 
        props: {
              url: '',
              params: [],
              cols: [],
              jurisdictions: [],
              selfmotionpage: true,
              uniqueidentification:                                       'informations_m__controller',
              datapanel: false
            } 
       }
  },
  created(){
  
    bus.$on('handlejurisdiction', (method, data, caller) => {
        if (user === 'system_admin') {
          if (method === 'update') {
            this.update(caller, data)
          } else if (method === 'show') {
            this.show(caller, data)
          } else if (method === 'delete') {
            this.delete(caller, data)
          }
          //custom
        }
      })
      
  },
  methods:{
    update(caller,data){
    
    },
    delete(caller,data){
    
    },
    show(caller,data){
    
    },
    search(caller,data){
    
    // transmit params
    let cols=[{
            prop: 'id',
            label: 'id',
            dataIdentification: '',
            type: 'String',
            width: '120',
            sort: 'normal',
            hidden: 'true'
          },
          {
            prop: 'name',
            label: '名称',
            dataIdentification: '',
            type: 'String',
            width: '120',
            sort: 'normal',
            hidden: 'false'
          }]

    let jurisdictions = [
          {id: 1, name: '查看', method: 'show'},
          {id: 2, name: '修改', method: 'update'},
          {id: 3, name: '删除', method: 'delete'},
        ]
        
    let url = 'getlist'
    
    let params = new URLSearchParams()
    params.append(name,"table1")
    
    this.props.cols = cols
    this.props.params = params
    this.props.jurisdictions = jurisdictions
    this.props.url = url
    this.props.selfmotionpage = false
 
    }
  }
}
</script>

Table props 属性

属性	类型	简介	实例
url	String	数据地址	let url='traps.ueuo'
params	Object	参数可选	let params = new URLSearchParams() params.append(name,"table1")
cols	Object	表头	let cols = [{prop: 'id']}
jurisdictions	Object	权限
selfmotionpage	Boolean	自动分页	true or false
uniqueidentification	String	调用者唯一标识	system_admin
datapanel	Boolean	table 数据面板	true or false

Table clos 属性

属性	类型	简介	实例
prop	String	引用字段属性	name,age,id
label	String	表头标识	姓名，年龄，编号
dataIdentification	String	自定义条件标识	gender
width	String·	cols 宽度	0-200px
sort	String·	是否排序	sort or normal
hidden	String·	cols 隐藏	true or false

Table jurisdictions 属性

属性	类型	简介	实例
id	Long	权限标识	1,2,3···
name	String	权限名称	修改，删除，账户
method	String	权限方法，回调函数	update,delete,Account

---

文章编写不易 欢迎有 能力者 提出改进意见