vue中el-table的展开/收起 功能

<template>
    <div class="strategy-content">
        <p
            v-for="(item,index) in showStrategyList"
            :key="index"
        >
            {{ item }}
        </p>
        <el-button
            v-if="strategyList.length>1"
            type="text"
            @click="showMore = !showMore"
        >
            {{ showMore ? '收起' : '展开' }}
        </el-button>
    </div>
</template>

<script>
import {
    reactive, toRefs, computed,
} from '@vue/composition-api';

export default {
    name: 'Log',
    props: {
        strategyList: {
            type: Array,
            default: () => ([]),
        },
    },
    setup(props) {
        const initData = reactive({
            showMore: false,
        });

        const showStrategyList = computed(() => (initData.showMore ? props.strategyList : props.strategyList.slice(0, 1)));

        return {
            ...toRefs(initData),
            showStrategyList,

        };
    },
};
</script>
<style lang="scss" scoped>
.strategy-content {
    font-size: 12px;
    height: 200px !important;
    overflow-y: scroll;
}
</style>