关于vue slot实战体会

最新推荐文章于 2024-04-20 18:56:12 发布

GIS_BMB

最新推荐文章于 2024-04-20 18:56:12 发布

阅读量834

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/vw2009/article/details/104613880

版权

VUE 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端在写公共组件的时候，为了实现组件的可扩展性和复用性，通常会使用Slot来进行扩展。避免长篇阔谈，我这里直接上项目实战代码。
场景：为多个页面写一个公共Table组件，每个页面对于表格的操作都不太一样，这就需要我们在Table组件里面留下Slot，便于其他组件扩展引用。（注：UI用的Ant）。

Table组件如下：

<template>
    <div class='be-table'>
        <a-table bordered :dataSource="dataSource" :columns="columns" :rowKey="rowKey" :pagination="pagination" @change="changeFun" >
            <template slot="operation" slot-scope="text,record">
                <div class="table-row-operations">
                    <slot name="myOperations" :record="record"></slot>
                </div>
            </template>
        </a-table>
    </div>
</template>
<script>
    export default {
        name:'BeTable',
        props:{
            columns:{
                type:Array,
                require: true
            },
            dataSource:{
                type:Array,
                require: true
            },
            rowKey:{
                type:String,
                default: 'name'
            },
            loading:{
              type:Boolean,
              default:false
            },
            pagination:{
                type:Object,

            },
            changeFun:{
                type:Function,
                default: ()=> {

                }
            },
        },
        data() {
            return {
                count: 2,
            };
        },
        methods: {
        },
    };
</script>
<style scoped lang="less">
    @import '~@assets/app.less';
    .be-table{
        /*height: 100%;*/
        width: 100%;
        .editable-add-btn {
            margin-bottom: 8px;
        }
        .table-row-operations{
            color:@baseBG2-color2;
            text-align: center;
            i:hover{
                transform: scale(1.2);
                cursor: pointer;
            }
            span:hover{
                /*font-size: 16px;*/
                cursor: pointer;
                text-decoration:underline;
            }

        }
    }
</style>

组件引用：

这里使用了具名插槽，并将利用作用域将"record"从table组件引出来，便于我们自定义扩展传值。这里只需要在<template>里面加入我们想添加的东西（如：新增、删除、查看、其他自定义操作），简单说就是想写什么就写什么，响应函数就在引用组件里面写。是不是很灵活呢！！！！！

扩展：
（1）查看、删除操作

 <BeTable :columns="columns" :dataSource="dataSource" :rowKey="rowKey">
       <template #myOperations="{record}">
                <a-icon type="info-circle" title="查看" @click="doShowInfo(record[rowKey],record)"/>
                <a-divider type="vertical"/>
                <a-popconfirm title="确定删除?" @confirm="() => doDelete(record[rowKey])" okText="确认" cancelText="取消">
                    <a-icon type="delete" title="删除" />
                </a-popconfirm>
                <a-divider type="vertical"/>
                <a-icon type="pause-circle" v-if=" record['state']=='running'" @click="doPlay(record[rowKey],'pause')" title="暂停"/>
                <a-icon type="play-circle" v-if="record['state']=='paused'"  @click="doPlay(record[rowKey],'start')" title="播放"/>
        </template>
 </BeTable>

（2）自定义其他操作（”逻辑特征类“、”逻辑对象类“）

 <BeTable :columns="columns" :dataSource="dataSource" :rowKey="rowKey">
      <template #myOperations="{record}">
                <span @click="showLgcFtrCls(record)">逻辑特征类</span>
                <a-divider type="vertical" />
                <span @click="showLgcObjCls(record)" >逻辑对象类</span>
                <a-divider type="vertical" />
                <a-popconfirm title="确认删除?"  @confirm="() => doDelete(record[rowKey])" okText="确认" cancelText="取消">
                    <a-icon type="delete" title="删除"/>
                </a-popconfirm>
      </template>
</BeTable>