Vue Element UI Table 表自動生成 Table 表封裝 2.0（詳細教程）

時間 2020-05-26

標籤 vue element table 自動生成封裝 2.0 詳細教程欄目軟件設計简体版

原文原文鏈接

Element UI Table 表封裝

文章解析

table 組件封裝

條件分頁獲取數據
自定義table 表頭
自定義table 權限
自定義字段是否必須
自定義是否自動分頁
自定義日期格式
監聽發送權限操做
返回調用者信息
table 數據可視化面板 vue

入門必讀

Vue http 請求封裝包
 Element UI Table 分頁教程
 Vue 組件通訊app

Template

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

<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>ide

Script

export default {flex

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>ui

使用方法

建立 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