背景

在crm系統(tǒng)中，table里某字段的值很長的時候會使得本條數(shù)據(jù)長度很長，占據(jù)空間。我們可以給其增加一個折疊功能，默認收起，查看點擊展開。如下示例：

image.png

使用

引入組件

import FoldToggle from '@/components/foldToggle/index'

注冊組件

components: {
    FoldToggle
  },

模版使用

<el-table-column :label="'內(nèi)容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>

組件實現(xiàn)

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