列表“展开更多“组件封装,安排!

哈喽小伙伴们,大家好!我是爱学英语的程序员~

今天来给大家分享一个列表"展开更多"的组件封装.

需求分析:列表操作栏优化

当操作类型多于2个的时候显示"展开更多",点击的时候展开剩下的内容

详细实现步骤:

封装一个组件,让它在需要的页面引入

OperatorTypes.vue

<script lang="ts">
import { defineComponent, PropType } from "vue";
export default defineComponent({
  name:"OperatorTypes",
data(){

return {
  showMore: false
};
},
  computed: {
    shouldShowMore() {
      return this.actions.length > 2;
    }
  },
  props: ['actions'],
  methods: {

    toggleMore() {
        this.showMore = !this.showMore;

    },
    handleAction(action) {
      this.$emit("perform-action", action);
    }

  },

})
</script>
<template>
  <div id="app">
    <div style="display: flex">
      <div class="showed" @click.stop>
        <span v-for = "(action,index) in actions.slice(0,2)" :key = "index" style="padding-right: 10px" @click="handleAction(action)" > {{action}}</span>
      </div>
      <div>
        <div v-if = "shouldShowMore"  @click="toggleMore" style="cursor: pointer; text-decoration: underline; color: blue;" @click.stop>展开更多</div>
        <div class="more" v-show="showMore" >
          <span v-for="(action,index) in actions.slice(2)" :key="index">{{action}}</span>
        </div>
      </div>
    </div>

  </div>

</template>
<style scoped lang="scss">
.more {
  display: flex;
  flex-direction: column;
}
</style>

在父组件中引入

<template #operateSlot>
  <el-table-column
    label="操作"
    fixed="right"
    align="left"
    :width="isOperate ? '220px' : '80'"

  >
    <template #default="scoped">
      <OperateTypes
        :actions="generateContent(scoped.row)"
        @perform-action="handlePerformAction"
      >
        <!--                  通过改造服务的方式配置数据-->
      </OperateTypes>
    </template>
  </el-table-column>
</template>

数据交互:

父组件传递:

子组件接收:

方法交互:因为最终要实现这个方法的是子组件,但方法要通过父组件来定义,所以可以将方法传递给子组件

子组件来接收:通过方法名接收

子组件要在span身上绑定这个方法

父组件中这个方法的具体实现

拓展学习:

点击当前行的时候会默认跳转到详情,即选择了这一行中的一部分,但这一行默认都被选中了,我们应该怎样处理呢?

使用@click.stop()方法来实现.