element-ul的封装

第一步：先创建一个父组件

名子为domeView.vue的组件

<template>

    <div>

        <TestView :data="arr" :date="arr1">

            <template>

                <el-button size="mini" type="primary">其他操作</el-button>

            </template>

        </TestView>

    </div>

</template>

<script>

// import TestView from '../components/TestView.vue';

export default {

    /* components: {

        TestView,

    }, */

    data() {

        return {

            arr: [

                {

                    date: '2016-05-02',

                    name: '王小虎',

                    address: '上海市普陀区金沙江路 1518 弄'

                },

                {

                    date: '2016-05-02',

                    name: '王小虎',

                    address: '上海市普陀区金沙江路 1518 弄'

                },

                {

                    date: '2016-05-02',

                    name: '王小虎',

                    address: '上海市普陀区金沙江路 456 弄'

                },

            ],

            arr1: [

                { label: '日期', prop: 'date' },

                { label: '姓名', prop: 'name' },

                { label: '地址', prop: 'address' }

            ]

        };

    },

};

</script>

   

在上面代码中我们看见了。引入眼帘一个子组件的名字叫TexsView.vue的组件名，然后用父传子的方法把arr和arr1传给了子组件，

第二步：创建一个名叫TestView.vue的子组件名

<template>

    <div class="hello">

        <el-table :data="data">

            <el-table-column v-for="column in date" :key="column.prop" :prop="column.prop" :label="column.label">

            </el-table-column>

            <el-table-column label="操作">

                <template slot-scope="scope">

                    <el-button size="mini" type="primary" @click="handleExtraAction(scope.row)">删除</el-button>

                </template>

            </el-table-column>

        </el-table>

    </div>

</template>

<script>

export default {

    props: {

        data: Array,

        date: Array

    }

}

</script>

在以上代码中我们用props接收的值，在arr1中我们看到了label和prop ，

在element-ul中我们有一个叫el-table-column的标签名，而他的属性就有label和prop，因此我们循环arr1就能实现我们的表头的操作，

在arr中我们看到了，一些数据我们在el-table中有一个属性叫data，我们用data循环arr，就能实现一个element-ul的表格封装