关于vue2.6.0版本以及后插槽使用例子和注意点

很菜很菜的人

已于 2023-01-09 11:35:33 修改

阅读量301

点赞数

文章标签： vue.js javascript 前端

于 2023-01-09 11:25:28 首次发布

本文链接：https://blog.csdn.net/qq_41304029/article/details/128610730

版权

首先我先粘出来我写的例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 使用table  -->
        <el-table :data='goods'>
            <!-- 注意v-slot后面的插槽名称要使用小写  -->
            <template v-slot:tableheader>
                标题
            </template>
            <!-- 下面这些默认在el-table的默认插槽上面 -->
            <template v-slot:default="{row}">
                <el-col :row-data="row" pro="gid"></el-col>
                <el-col :row-data="row" pro="gName"></el-col>
                <el-col :row-data="row" pro="price">
                </el-col>
                <el-col>
                    <template>
                        <a :href="`/update/${row.gid}`">修改</a>
                        <a :href="`/del/${row.gid}`">删除</a>
                    </template>
                </el-col>
            </template>
        </el-table>
    </div>
    <!-- el-table 组件 -->
    <template id="elTable">
        <table>
            <caption>
                <slot name="tableheader"></slot>
            </caption>
            <tbody>
                <tr v-for="row in data">
                    <!-- 给插槽传递 插槽prop -->
                    <template>
                        <!-- 往插槽的prop当中添加row数据 -->
                        <slot :row='row'></slot>
                    </template>
                </tr>
            </tbody>
        </table>
    </template>

    <!-- el-col组件 作为el-table子组件使用 -->
    <template id="elCol">
        <!-- 显示label  -->
        <td>
            <slot>{{rowData[pro]}}</slot>
        </td>
    </template>
</body>
<script src="./vue.js"></script>
<script>
    // 传递一个data 以及 列名 以及每列对应的名称和属性即可展示
    var elTable = {
        template: '#elTable',
        props: {
            data: Array
        }
    };
    var elCol = {
        template: '#elCol',
        props: {
            rowData: Object,
            pro: String
        }
    };

    var vm = new Vue({
        el: '#app',
        data: {
            goods: [
                { gid: 11, gName: '苹果1', price: 100 },
                { gid: 12, gName: '苹果2', price: 100 },
                { gid: 13, gName: '苹果3', price: 100 },
                { gid: 14, gName: '苹果4', price: 100 },
                { gid: 15, gName: '苹果5', price: 100 },
                { gid: 16, gName: '苹果6', price: 100 },
            ]
        },
        components: {
            elTable,
            elCol
        }
    })
</script>

</html>