折叠组件

实现一个如图的折叠功能。在table的表格里。

image.png

代码实现

<template>
  <div class="foldBox">
    <div :class="{'fold':isFold}"> {{ itemIds }} </div>
    <el-button class="btn_fold" :icon="isFold ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" style="border:none" @click="foldToggle"></el-button>
  </div>
</template>
<script>
  export default {
    props: {
      itemIds: String
    },
    data () {
      return {
        isFold: true
      }
    },
    methods: {
      foldToggle() {
        this.isFold = this.isFold ? false : true
      }
    }
  };
</script>
<style lang="scss" scoped>
.foldBox {
  .fold {
    height: 50px;
    overflow: hidden;
  }
  .button {
    width: 100%;
    height: 20px;
  }
}
</style>

注册

import FoldToggle from '@/components/foldToggle/index'
components: {
    FoldToggle
  },

调用

<el-table-column :label="'内容id'" prop="itemIds" min-width="150" align="center">
    <template slot-scope="scope">
        <FoldToggle :itemIds="scope.row.itemIds" :id="scope.row.id"></FoldToggle>
    </template>
</el-table-column>