首先, 使用过 element-ui 的 table 组建的同学都知道, 每次使用的时候表头字段都要一个一个的去写, 写起来很麻烦, 既不美观又浪费时间, 基于以上原因, 对 table 组件进行二次封装, 使我们在使用的时候更加简单方便.
这里只是简单的封装, 同学们若是感兴趣可以加以完善, 若有问题可以一起讨论.
- // 封装的 table 组件
- <template>
- <!-- 列表 -->
- <el-table
- stripe
- :border="border"
- :data="dataSource"
- @selection-change="handleSelectionChange"
- v-loading="listLoading"
- @row-dblclick="rowClick"
- highlight-current-row
- @row-click="clickTable"
- ref="refTable"
- @expand-change="expandChange"
- >
- <!-- 数据源 -->
- <el-table-column
- v-for="(column, index) in columns"
- header-align="center"
- v-if="column.isShow"
- :sortable="column.hasSort"
- :key="column.prop"
- :prop="column.prop"
- :label="column.label"
- :align="column.align"
- :width="column.width">
- </el-table-column>
- </el-table>
- </template>
- <script>
- export default {
- name:"tables",
- props:{
- dataSource: {// 表格数据源 默认为空数组
- type: Array,
- default: ()=> []
- },
- columns: {// 表格的字段展示 默认为空数组
- type: Array,
- default: ()=>[]
- }
- },
- components: {
- //
- },
- watch:{
- //
- },
- mounted(){
- //
- },
- methods: {
- //
- }
- }
- </script>
- <style lang="sCSS">
- //
- </style>
- View Code
封装完成后怎么调用这个组件呢?
- // 调用封装好的 table 组件
- <template>
- // 这里仅传入列表数据和表头数据, 如有其它需求可以增加传递参数
- <tables :dataSource="dataSource" :columns="columns"></tables>
- </template>
- <script>
- import tables from './table.vue' // 引入组件
- export default {
- data() {
- return {
- dataSource:[{
- 'createTime':123,
- 'times':123,
- 'username':'jj',
- 'deptName':'ii',
- 'status':'0',
- },{
- 'createTime':123,
- 'times':123,
- 'username':'jj',
- 'deptName':'ii',
- 'status':'0',
- },{
- 'createTime':123,
- 'times':123,
- 'username':'jj',
- 'deptName':'ii',
- 'status':'0',
- }],
- columns:[{
- hasSort: false, //<Boolean> 是否排序
- isShow: true, //<Boolean> 是否展示
- prop: 'createTime', //<String> 对应属性名
- label: '日期', //<String> 表头标签
- align: 'center',// 表头内容是否居中
- width: 200, // 列宽
- },{
- hasSort: false, //<Boolean> 是否排序
- isShow: true, //<Boolean> 是否展示
- prop: 'times', //<String> 对应属性名
- label: '时间', //<String> 表头标签
- align: 'center'// 表头内容是否居中
- },{
- hasSort: true, //<Boolean> 是否排序
- isShow: true, //<Boolean> 是否展示
- prop: 'username', //<String> 对应属性名
- label: '名字', //<String> 表头标签
- align: 'center'// 表头内容是否居中
- },{
- hasSort: true, //<Boolean> 是否排序
- isShow: true, //<Boolean> 是否展示
- prop: 'deptName', //<String> 对应属性名
- label: '部门名称', //<String> 表头标签
- align: 'center'// 表头内容是否居中
- },{
- hasSort: true, //<Boolean> 是否排序
- isShow: true, //<Boolean> 是否展示
- prop: 'status', //<String> 对应属性名
- label: '状态', //<String> 表头标签
- align: 'center'// 表头内容是否居中
- }
- ]
- }
- },
- components: {
- tables,// 注册 table 组件
- },
- watch:{
- //
- },
- mounted(){
- //
- },
- methods: {
- //
- }
- }
- </script>
- <style lang="scss">
- //
- </style>
- View Code
下面是我的公众号二维码, 欢迎同学们关注, 大家一起学习, 一起进步.
来源: http://www.bubuko.com/infodetail-3117574.html