Vee Element UI TableコンポーネントTable自動生成Tableカプセル化(詳細チュートリアル)

Vue Element UI Tableコンポーネントパッケージ
ここに言及する
Vue http要求パッケージElement UI TableページングチュートリアルVueコンポーネント通信
文章の解析
tableアセンブリパッケージ
条件ページングデータの取得データのカスタマイズtableヘッダーのカスタマイズtable権限のカスタマイズフィールドをカスタマイズする必要があるかどうか自動的にページングするかどうかカスタム日付フォーマットを返す応答を変更する削除操作を表示して呼び出し者情報を返す
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')
    },
  }