最近遇到了难题，是一个关于产品的优化问题。
折叠展开文字是不是听起来很简单的样子，可是就是有一个表格的问题把我给难住了，想了好久也没有想明白，最终还是我们的老大救援，做出来了。佩服呀！!!!
今天就这我研究代码的时间，借花献佛一下。
我的操作是这样的：
我需要先在整个页面的数组中添加一个新的值，来判断该字符串是不是超过了限定的宽度，如果超出了就为true，否则就是为false。但是添加一个值还是不够，我还需要再每行的值中添加一个值来判断，当前的数据是展开还是折叠，也就是我必须往数组中不断的加入新的值，才能实现需求。但是这个方式还有一个问题就是，我当前的窗口如果改变表格的大小也会随着改变，当表格显示到一定程度的时候，又有新的一行显示了三个点，但是我的代码并不能随着行的改变，这就需要解决新的问题，我要不断的适应浏览器的窗口变化才行。
这里老大使用了throttle-debounce，这个具体是什么我也不是很了解，反正就是会计算监听浏览器的变化，重新调用方法，是有延迟的时间设定，不过还是挺管用的，需要用的小伙伴，具体去问度娘。
下面就是我研究的内容，上代码的时间，想要做折叠的小伙伴可以研究一下，具体的写法，方法也不是很复杂。
我针对当前的表格，新建了一个组件，来专门做折叠，我使用的vue框架，这里就是vue 的组件喽！
<template> <div :class="showNoWarp"> <i class="el-icon-d-arrow-right text-overflow-show" v-if="showButton" @click="toggleExpanded(true)" ></i> <div class="col-expand" ref="content"> <slot></slot> </div> <div class="text-overflow-show" v-if="isExpanded" @click="toggleExpanded(false)" >收起</div> </div></template><script>import { debounce } from "throttle-debounce";let renderHandler;export default { data() { return { isExpanded: false, //是否显示折叠按钮 isOverflowing: false, //是否被隐藏 }; }, computed: { showButton() { return this.isOverflowing && !this.isExpanded; }, showNoWarp() { return { "text-overflow-is": !this.isExpanded }; } }, mounted() { this.updteContent(); renderHandler = debounce(300, this.updteContent); window.addEventListener("resize", renderHandler); }, methods: { updteContent() { this.$nextTick(function() { const { clientWidth, scrollWidth } = this.$refs.content; if (clientWidth == undefined || scrollWidth == undefined) return; //当前的窗口在不停的改变会有报错 this.isOverflowing = clientWidth < scrollWidth; const isResize = event instanceof Event && event.type === "resize"; //检测当前的窗口监听事件 if (!this.isOverflowing || !isResize) this.isExpanded = false; }); }, toggleExpanded(bol) { this.isExpanded = bol; } }};</script><style scoped>.text-overflow-is { white-space: nowrap;}.col-expand { overflow: hidden; text-overflow: ellipsis;}.text-overflow-show { color: orange; float: right; cursor: pointer; margin-top: 5px; margin-left: 5px;}</style>
好了，代码已经复制粘贴了，接下来就是自己在这个组件中学到了什么？
布尔值使用逻辑，要想方设法的实现自己想要的结果，不惜多定义几个变量组件的使用不一定非要接收父组件的值，还可以使用solt插入值（这个着实太方便了）不知道的小伙伴要赶紧去官网复习一下知识点哦！显示省略号不一样需要控制宽度，只要控制好父级元素的宽度就好了，只要 父级元素有宽度就能使用属性 text-overflow: ellipsis;（这里真是摆正了我的思想误区呀！！）有没有好的方案吗？欢迎各位小伙伴出计策~~