elementUI之table组件封装

知迷鸟
677 阅读1分钟

背景

今天带来的是UI库中的table 组件封装；背景toB开发需求中大量的使用table组件，导致代码结构层次上非常冗余,功能点也经常重复的书写；为了不做重复造轮子的工作，秉承高可用高复用的开发效率，对此进行封装

案例展示

此案例仅展示简单封装，仅供学习参考，具体需要根据自己的项目来做更加复杂的功能封装

如需使用请移至更新篇
源码：https://github.com/Dawn-ferry/vue-ele-ui.git


    <hr />
    <SimpleTable
      ref="multipleTable"
      :tableData="tableData"
      :filterColums="filterColums"
      selectType="selection"
      @handleSelect="handleSelect"
    >
      <template v-slot:tableBody="{ scopeData: { row, column } }">
        <template v-if="column.property === 'enable'">
          <div v-if="row.enable === 0" style="color: #d9001b">禁用</div>
          <div v-else style="color: #67c23a">启用</div>
        </template>
        <template v-else-if="column.property === 'imgCover'">
          <img v-if="row.imgCover" :src="row.imgCover" style="width: 80px; height: 80px" />
        </template>
        <template v-else-if="column.property === 'effectiveDate'"> {{ row.date }}~{{ row.endDate }} </template>
        <template v-else-if="column.property === 'edit'">
          <el-button type="text" size="small" @click="openFn(row)">查看</el-button>
          <el-button type="text" size="small" @click="editFn(row)">编辑</el-button>
        </template>
      </template>
    </SimpleTable>
  </div>
</template>
<script>
import Table from '@/components/table'
import { columsData, tableData } from './config'
export default {
  name: 'tableModule',
  components: {
    Table,
    SimpleTable: () => import('@/components/simpleTable'),
  },
  data() {
    return {
      // 需要排序的字段
      sortData: ['age'],
      filterColums: columsData,
      tableData,
    }
  },
  methods: {
    toggleSelection(rows) {
      console.log('this.$refs.multipleTable', this.$refs.multipleTable)
      // if (rows) {
      //   rows.forEach((row) => {
      //     this.$refs.multipleTable.toggleRowSelection(row);
      //   });
      // } else {
      //   this.$refs.multipleTable.clearSelection();
      // }
    },
    openFn(val) {
      console.log('查看操作', val)
    },
    editFn(val) {
      console.log('编辑操作', val)
    },
    handleSelectFn(val) {
      console.log('获取组件选择数据 ', val)
    },
  },
}
</script>
<style scoped></style>

更新篇

更新篇，最近做公共组件，已经将该组件封装成库中，欢迎大家使用并提意见，后期有时间会做改善，相关有复用性组件也会增加；

使用

npm i element-ui vue-ele-ui -S

Quick Start

在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VueEleUI from 'vue-ele-ui';
import 'vue-ele-ui/lib/vue-ele-ui.css';
import App from './App.vue';
Vue.use(ElementUI);
Vue.use(VueEleUI);
new Vue({
  render: h => h(App)
}).$mount('#app');

Case Shows


<template>
  <div class="useReTable" id='app'>
    <reTable ref="multipleTable" :tableData="tableData" :filterColums="filterColums" selectType="selection" @handleSelect="handleSelectFn">
      <template v-slot:tableBody="{ scopeData: { row, column } }">
        <template v-if="column.property === 'enable'">
          <div v-if="row.enable === 0" style="color: #d9001b">disable</div>
          <div v-else style="color: #67c23a">enable</div>
        </template>
        <template v-else-if="column.property === 'imgCover'">
          <img v-if="row.imgCover" :src="row.imgCover" style="width: 80px; height: 80px" />
        </template>
        <template v-else-if="column.property === 'effectiveDate'">{{ row.date }}~{{ row.endDate }}</template>
        <template v-else-if="column.property === 'edit'">
          <el-button type="text" size="small" @click="openFn(row)">open</el-button>
          <el-button type="text" size="small" @click="editFn(row)">edit</el-button>
        </template>
        <template v-else>{{ row[column.property] }}</template>
      </template>
    </reTable>
  </div>
</template>

<script>

export default {
  name: 'useReTable',
  data() {
    return {
      sortData: ['age'],
      filterColums: [
        {
          prop: 'enable',
          label: '是否禁用'
        },
        {
          prop: 'province',
          label: '省份'
        },
        {
          prop: 'city',
          label: '市区'
        },
        {
          prop: 'address',
          label: '地址'
        },
        {
          prop: 'zip',
          label: '邮编'
        },
        {
          prop: 'age',
          label: '年龄'
        },
        {
          prop: 'effectiveDate',
          label: '有效日期'
        },
        {
          prop: 'imgCover',
          label: '封面',
          width: '180'
        },
        {
          label: '操作',
          prop: 'edit',
          fixed: 'right',
          width: '180'
        }
      ],
      tableData: [
        {
          date: '2016-05-02',
          endDate: '2020-02-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          age: 12,
          enable: 1,
          imgCover: 'https://tva1.sinaimg.cn/large/9bd9b167gy1g2qkwm4hsoj21hc0u04qp.jpg'
        },
        {
          date: '2016-05-04',
          endDate: '2020-06-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333,
          age: 22,
          enable: 1,
          imgCover: `https://tva1.sinaimg.cn/large/9bd9b167gy1g2qkwm4hsoj21hc0u04qp.jpg`
        },

        {
          date: '2016-05-01',
          endDate: '2021-01-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333,
          age: 9,
          enable: 0,
          imgCover: 'https://tva1.sinaimg.cn/large/9bd9b167gy1g2qkwm4hsoj21hc0u04qp.jpg'
        },

        {
          date: '2016-05-03',
          endDate: '2021-10-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333,
          age: 2,
          enable: 0,
          imgCover: ''
        }
      ]
    }
  },
  mounted() {},
  methods: {
    toggleSelection() {
      console.log('this.$refs.multipleTable', this.$refs.multipleTable)
    },
    openFn(val) {
      console.log('openFn', val)
    },
    editFn(val) {
      console.log('editFn', val)
    },
    handleSelectFn(val) {
      console.log('handleSelectFn ', val)
    }
  }
}
</script>

Attributes

说明：目前只是简单的封装满足繁琐的业务要求及冗余的代码，并未完整实现所有 element 表格功能部分功能可能不支持，如有需要请讨论区提出

参数说明类型是否必填默认值
tableData显示的数据Arraytrue-
filterColums表头数据Arraytrue-
other parameter其他参数参考 element 文档-false-

在这里插入图片描述

结束语

大家有什么问题可以私信或讨论区提出，我看到都会即使回复，希望大家多多支持，谢谢

avatar
文章
阅读
粉丝