vue封裝element 中table組件

一、知識點

插槽
組件

二、項目初始化

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

三、父組件 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>

四、子組件 CommonTable.vue

<template>
    <div class="common-table">
        <el-table
            :data="tableData"
            stripe
            header-cell-class-name="header-cell-class-name"
            style="width: 100%">
             <!-- 
                    一、slot-scope="scope" 獲取到el-table子組件的內容
                    二、<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>

五、項目入口 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')

六、總結

github項目地址
https://github.com/shangliaoy...