frameSolt.vue 1.66 KB
// 结构性 插槽
<template>
    <div>
        <slot name="fliterData" msg="我是顶部筛选">
            顶部默认插槽
		</slot>

        <slot name="tablePage" msg="我是table">
			<tableCmp :tableParams='tableParams' 
                @sizeChange='sizeChange'
                @currentChange='currentChange'
                @selectionChange='selectionChange'
                @cellClick='cellClick'
                @sortChange='sortChange'></tableCmp>
        </slot>
    </div>
</template>
<script>
	//引入组件
	import tableCmp from './tableCmp';
	
    export default {
        name: 'loseMsg',
        props: {
            tableParams: {
                require: true,
            }
        },
        components: {
			tableCmp
        },
        computed: {
           
        },
        data() {
            return {
                spinShow: true,

            }
        },
        watch: {

        },
        methods: {
            // 切换每页条数
			sizeChange(sizeNum) {
				this.$emit('sizeChange', {sizeNum});
			},
			// 切换页码
			currentChange(current) {
				this.$emit('currentChange', {current});
			},
			// 	当选择项发生变化时会触发该事件
			selectionChange(selection) {
				this.$emit('selectionChange', {selection})
			},
			// 当某个单元格被点击时会触发该事件
			cellClick(row, column, cell, event) {
				this.$emit('cellClick', {row, column, cell, event})
			},
			// 当表格的排序条件发生变化的时候会触发该事件
			sortChange(e) {
				this.$emit('sortChange', e)
			}
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>