vue封装element-中table组件

1、知识点

插槽
组件

2、项目初始化

• 使用 vue-cli3 安装项目 vue create‘项目名’
• npm install element-ui -s

3、父组件 List.vue

<template>
    <div class="table-section">
        <common-table
        :column="column"
        :tableData="tableData"
        :pageVo="pageVo"
        @handleCurrentChange="handleCurrentChange"
        >
        <!-- ID -->
        <template v-slot:id="{row}">
            <div class="pub-status">
                VIP
                <span class="triangle-up"></span>
            </div>
            {{row.id}}
        </template>
        <!-- 性别 -->
        <template v-slot:sex="{row}">
            <template v-for="(item) in sexOption">
                <template v-if="row.sex === item.id">
                    {{item.label}}
                </template>
            </template>
        </template>
        <!-- 年级 -->
        <template v-slot:grade="{row}">
            <template v-for="(item) in gradeOption">
                <template v-if="row.grade === item.id">
                    {{item.label}}
                </template>
            </template>
        </template>
        <!-- 描述 -->
        <template v-slot:desc="{row}">
            <el-popover
                popper-class="table-popper"
                placement="right-start"
                trigger="hover"
                width="100"
                v-if="row.desc && row.desc.length > 20"
                :content="row.desc">
                <span slot="reference">{{row.desc.length > 20 ? row.desc.substr(0,20) + '...' : row.description}}</span>
            </el-popover>
            <span v-else>{{row.desc}}</span>
        </template>
        </common-table>
    </div>
</template>

<script>
import CommonTable from './CommonTable'
export default {data(){
        return{
            column:[
                {
                    prop:"id",
                    align:"",
                    label:"ID",
                    scopeStatus:true,
                    width:"",
                    minWidth:""
                },
                {
                    prop:"name",
                    align:"",
                    label:"姓名",
                    scopeStatus:false,
                    width:"",
                    minWidth:""
                },
                {
                    prop:"sex",
                    align:"",
                    label:"性别",
                    scopeStatus:true,
                    width:"",
                    minWidth:""
                },
                {
                    prop:"age",
                    align:"",
                    label:"年龄",
                    scopeStatus:false,
                    width:"",
                    minWidth:""
                },
                {
                    prop:"grade",
                    align:"",
                    label:"年级",
                    scopeStatus:true,
                    width:"",
                    minWidth:""
                },
                {
                    prop:"desc",
                    align:"",
                    label:"描述",
                    scopeStatus:true,
                    width:"",
                    minWidth:""
                }
            ],
            tableData:[
                {
                    id:"1",
                    name:"张三",
                    sex:0,
                    age:12,
                    grade:1,
                    desc:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
                },
                {
                    id:"2",
                    name:"李四",
                    sex:0,
                    age:13,
                    grade:2,
                    desc:"HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH"
                },
                {
                    id:"3",
                    name:"李丽",
                    sex:1,
                    age:13,
                    grade:2,
                    desc:"AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
                }
            ],
            pageVo:{
                total:3,
                pageSize: 1,
                currentPage: 1
            },
            sexOption:[
                {
                    id:0,
                    label:"男"
                },
                {
                    id:1,
                    label:'女'
                }
            ],
            gradeOption:[
                {
                    id:1,
                    label:"一年级"
                },
                {
                    id:2,
                    label:"二年级"
                },
                {
                    id:3,
                    label:"三年级"
                },
                {
                    id:4,
                    label:"四年级"
                },
                {
                    id:5,
                    label:"五年级"
                },
                {
                    id:6,
                    label:"六年级"
                }
            ]
        }
    },
    components:{CommonTable},
    methods:{
        /**
         * 页码改变
         */
        handleCurrentChange (val) {
            this.pageVo.currentPage = val
            alert("当前页面为："+val)
        },
    }
}
</script>

<style lang="scss" scoped>
.table-section{
    width:100%;
    .pub-status{
        display: inline-block;
        position: absolute;
        top:0px;
        left:0px;
        width: 26px;
        height: 36px;
        background-color: #66b1ff;
        color: #fff;
        font-size: 12px;
        transform: scale(0.8);//chrome 默认最小字体是 12px，将字体变成 10px
        .triangle-up{
            width:0;
            height:0;
            border-right:12px solid transparent;
            border-left:12px solid transparent;
            border-bottom:12px solid #fff;
            position: absolute;
            top:25px;
            left:0px;
        }
    }
    .danger-text{color: red;}
    .gray-text{color:darkgray;}
}
</style>

4、子组件 CommonTable.vue

<template>
    <div class="common-table">
        <el-table
            :data="tableData"
            stripe
            header-cell-class-name="header-cell-class-name"
            style="width: 100%">
             <!-- 
                    1、slot-scope="scope" 获取到 el-table 子组件的内容
                    2、<slot v-if="item.scopeStatus" :name="item.prop" :row="scope.row"></slot> 将子组件的内容传给父组件
                 -->
            <template  
                v-for="(item,index) in column">
                    <el-table-column
                    :key="index"
                    :width="item.width?item.width:'auto'":min-width="item.minWidth":prop="item.prop":align="item.align?item.align:'center'"
                    :label="item.label">
                    <template slot-scope="scope">
                        <slot v-if="item.scopeStatus" :name="item.prop" :row="scope.row" >
                        </slot>
                        <template v-else>
                            {{scope.row[item.prop]}}
                        </template>
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <el-pagination v-if="!!tableData.length" class="pagination"
            @current-change="handleCurrentChange"
            :current-page="pageVo.currentPage"
            :page-size="pageVo.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="pageVo.total">
        </el-pagination>
    </div>
</template>

<script>
export default {
    props:{
        tableData:{type:Array},
        column:{type:Array},
        pageVo:{type:Object}
    },
    methods:{handleCurrentChange(val){this.$emit('handleCurrentChange',val)
        }
    }
}
</script>

<style >

</style>

5、项目入口 main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

6、总结

github 项目地址
https://github.com/shangliaoy…