vue如何封装table,让多个view使用

1.安装 element-ui：npm i element-ui -S

2.在main.js里引入

import ElementUI from 'element-ui';							// 引入ElementUI组件库
import 'element-ui/lib/theme-chalk/index.css';	// 引入ElementUI全部样式

Vue.use(ElementUI)	// 使用ElementUI

3.在components创建一个组件MyTable.vue，复制el里的table组件

<template>
    <div class="container">
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column v-for="(title, index) in titles" :key="index" :prop="title.prop" :label="title.label">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    name: 'MyTable',
    props: {
        tableData: {},
        titles: {}
    },
    methods: {
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex === 1) {
                return 'warning-row';
            } else if (rowIndex === 3) {
                return 'success-row';
            }
            return '';
        }
    }
};
</script>
<style scoped>
.container {
    margin-top: 20px;
}

.container>>>.el-table .warning-row {
    background: oldlace;
}

.container>>>.el-table .success-row {
    background: #f0f9eb;
}
</style>

4.在view里创建BookView.vue

emplate>
    <div>
        <MyTable :tableData="booksData" :titles="books" />
    </div>
</template>

<script>
import MyTable from '../components/MyTable.vue';

export default {
    data() {
        return {
            booksData: [
                {
                    name: '活着',
                    price: '￥30',
                    author: '余华',
                },
                {
                  ....自己写一些数据
                }
            ],
            books: [
                { prop: 'name', label: '书名' },
                { prop: 'price', label: '价格' },
                { prop: 'author', label: '作者' },
            ],
        };
    },
    methods: {
    },
    components: {
        MyTable,
    },
};
</script>
<style scoped></style>

5.可以再创建一个GoodView.vue

<template>
    <div>
        <my-table :tableData="goodsData" :titles="goods" />
    </div>
</template>

<script>
import MyTable from '../components/MyTable.vue';

export default {
    data() {
        return {
            goodsData: [
                {
                    snack: '巧克力',
                    brand: '好时',
                    price: '￥20',
                },
                {
                   ...自己写一些数据
                },

            ],
            goods: [
                { prop: 'snack', label: '零食名称' },
                { prop: 'brand', label: '品牌' },
                { prop: 'price', label: '价格' },
            ],
        };
    },
    methods: {
    },
    components: {
        MyTable,
    },
};
</script>