背景
在crm系統(tǒng)中，table里某字段的值很長的時(shí)候會使得本條數(shù)據(jù)長度很長，占據(jù)空間言蛇。我們可以給其增加一個(gè)折疊功能，默認(rèn)收起宵距，查看點(diǎn)擊展開腊尚。如下示例：
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>
組件實(shí)現(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>
