优雅的使用 element-ui 中的 table 组件之升级版

2023-01-15 231

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 优雅的使用 element-ui 中的 table 组件之升级版

优雅的使用 element-ui 中的 table 组件之升级版

原文在这里，优雅的使用 element-ui 中的 table 组件，作者写的很棒，我在项目里也广泛使用，很好用，使用过程中，因为需要其他的功能，我在作者原有的基础上，升级了原组件，主要增加了以下：

slot-scope统一替换成v-slot
自定义排序
可勾选
加载状态

EnhancedTable的代码

点击预览

github地址

先贴上源码，我喜欢用pug，其实就是去掉成对的标签，属性在括号里，通过缩进表达嵌套关系。让项目能用pug的话，npm install pug pug-cli pug-plain-loader -D即可。

<template lang="pug">
el-table(:data="tableData" v-loading="isLoad" stripe v-bind="tableConfig" @sort-change="changeSort" @selection-change="changeSelectRows")
  template(v-for="colConfig in colConfigs")
    //- 循环每一项 有slot的单独渲染
    slot(v-if="colConfig.slot" :name="colConfig.slot" :col-config="colConfig")
    //- 有component的单独渲染
    component(v-else-if="colConfig.component" :is="colConfig.component" :col-config="colConfig")
    //- 普通项
    el-table-column(v-else v-bind="colConfig")
</template>
<script>
export default {
  name: 'enhanced-table',
  props: { colConfigs: Array, tableData: Array, tableConfig: Object, isLoad: Boolean },
  methods: {
    // 提前先定义排序事件，需要用的时候直接在父组件使用
    changeSort ({ column, prop, order }) {
      this.$emit('sort-change', column, prop, order)
    },
    // 提前先定义排序事件，需要用的时候直接在父组件使用
    changeSelectRows (val) {
      this.$emit('selection-change', val)
    }
  }
}
</script>

父组件使用EnhancedTable

综合使用的demo代码如下

<template lang="pug">
ul
  li
    h2(id="#basic") 基本表格
    enhanced-table(:tableData="tableData" :col-configs="basicTableConfigs")
  li
    h2 特殊行用slot的表格
    enhanced-table(:tableData="tableData" :col-configs="slotTableConfigs")
      template(v-slot:options="{colConfig}")
        el-table-column(v-bind="colConfig")
          template(v-slot="{row}")
            el-button(size="mini") 查看{{row.date}}
  li
    h2 特殊行用component的表格
    enhanced-table(:tableData="tableData" :col-configs="componentTableConfigs")
  li
    h2 有排序的表格
    enhanced-table(:tableData="tableData" :col-configs="sortedTableConfigs",@sort-change='changeCustomSort')
  li
    h2 可以勾选行的表格
    enhanced-table(:tableData="tableData" :col-configs="selectRowTableConfigs",@selection-change="selectDeleteRows")
  li(id="#loading")
    h2 有加载状态的表格
    enhanced-table(:is-load='isShowTableLoading' :tableData="tableData" :col-configs="selectRowTableConfigs")
</template>
<script>
// @ is an alias to /src
import EnhancedTable from '@/components/EnhancedTable.vue'
import PrefixPlusText from '@/components/PrefixPlusText.vue'
export default {
  name: 'home',
  components: {
    EnhancedTable,
    PrefixPlusText
  },
  data () {
    let basicTableConfigs = [
      { prop: 'date', label: '日期' },
      { prop: 'name', label: '姓名' },
      { prop: 'address', label: '地址' },
      { prop: 'trend', label: '趋势' }
    ]
    let slotTableConfigs = [
      { prop: 'date', label: '日期' },
      { prop: 'name', label: '姓名' },
      { prop: 'address', label: '地址' },
      { prop: 'trend', label: '趋势' },
      { slot: 'options', label: 'slot的操作', message: 'message' }
    ]
    let componentTableConfigs = [
      { prop: 'date', label: '日期' },
      { prop: 'name', label: '姓名' },
      { prop: 'address', label: '地址' },
      { component: PrefixPlusText, prop: 'change', label: 'component的变化' },
      { prop: 'trend', label: '趋势' }
    ]
    let sortedTableConfigs = [
      { prop: 'date', label: '有排序的日期，不是自定义的不需要加事件', sortable: true },
      { prop: 'name', label: '自定义排序的姓名，需要加事件', sortable: 'custom' },
      { prop: 'address', label: '地址' },
      { prop: 'trend', label: '趋势' }
    ]
    let selectRowTableConfigs = [
      { prop: '随便', type: 'selection', label: '日期' },
      { prop: 'date', label: '日期' },
      { prop: 'name', label: '姓名' },
      { prop: 'address', label: '地址' },
      { prop: 'trend', label: '趋势' }
    ]
    let loadingTableConfigs = [
      { prop: 'date', label: '日期' },
      { prop: 'name', label: '姓名' },
      { prop: 'address', label: '地址' },
      { prop: 'trend', label: '趋势' }
    ]
    return {
      basicTableConfigs,
      slotTableConfigs,
      componentTableConfigs,
      sortedTableConfigs,
      // 下面rowsToDelete在勾选事件的时候能是数组，每项就是row
      selectRowTableConfigs,
      rowsToDelete: [],
      // 下面的isShowTableLoading就是加载的flag
      loadingTableConfigs,
      isShowTableLoading: true,
      tableData: [{
        id: '1',
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        change: '12%',
        trend: '10%'
      }]
    }
  },
  mounted () {
    setTimeout(() => {
      this.isShowTableLoading = false
    }, 1000)
  },
  methods: {
    changeCustomSort (column, prop, order) {
      console.log(arguments)
      let isAsc
      order === null && (isAsc = '')
      order === 'ascending' && (isAsc = true)
      order === 'descending' && (isAsc = false)
      this.sortBy = prop
      this.isAsc = isAsc
    },
    selectDeleteRows (val) {
      console.log(arguments)
      this.rowsToDelete = val
    }
  }
}
</script>