vue slot开发表格组件

slot用法回顾

子组件

父组件引入

用法1

用法2

表格组件开发

组件内容

组件使用

定义表头和表格数据

使用组件

本案例代码

表格组件(需要bootstrap样式支持)

<template>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th v-for="(item,index) in columns" :key="index">{{item.name}}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item,index) in data" :key="index">
                <td v-for="(td,tdi) in columns" :key="tdi">
                    {{item[td.slot] || ''}}
                    <slot :name="td.slot" :item="item" :index="index"></slot>
                </td>
            </tr>
        </tbody>
    </table>
</template>

<script>
    export default {
        props:['columns','data']
    }
</script>

<style>
</style>

使用

<template>
    <div>
        <e-table :columns="columns" :data="data">
            <template #action="{item, index}">
                <button class="btn btn-primary btn-sm mr-2" @click="edit(item)">修改</button>
                <button class="btn btn-danger btn-sm" @click="del(index)">删除</button>
            </template>
        </e-table>
    </div>
</template>

<script>
    import eTable from "./e-table.vue"
    export default {
        data() {
            return {
                columns: [
                    { name: "姓名", slot: "name" },
                    { name: "性别", slot: "sex" },
                    { name: "年龄", slot: "age" },
                    { name: "操作", slot: "action" }
                ],
                data: [
                    { name: "小明", sex: "男", age: 22 },
                    { name: "小红", sex: "女", age: 20 },
                    { name: "小黄", sex: "男", age: 23 },
                ]
            }
        },
        components: {
            eTable
        },
        methods: {
            edit(item) {
                item.name = Math.floor(Math.random() * 100)
            },
            del(index) {
                this.data.splice(index, 1)
            }
        },
    }
</script>

<style>
</style>