实现一个如图的折叠功能。在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>
