背景

在crm系统中，table里某字段的值很长的时候会使得本条数据长度很长，占据空间。我们可以给其增加一个折叠功能，默认收起，查看点击展开。如下示例：

image.png

使用

引入组件

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>

组件实现

<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>