1.折叠与展开描述
expand为展示描述信息,当描述信息太长时折叠描述,同时可以点击按钮,展开描述
<div v-if="!expanded">{{ videoDescription.substring(0, 20) }}...</div>
<div v-else>{{ videoDescription }}</div>
<button @click="toggleExpanded">
{{ expanded ? '收起' : '展开' }}
</button>
// 判断展示文字<script>
const expanded = ref(false)
const toggleExpanded = () => {
expanded.value = !expanded.value
}
// 给button添加颜色
button {
color: blue;
cursor: pointer;
}
2.表格文字太长-隐藏部分
文字超过15个字时,隐藏起来,防止表格被撑得很大
<el-table-column
label="描述"
align="center"
prop="desc"
:formatter="truncateDesc"
/>
<script>
/**列表文字超出 */
const truncateDescription = (row) => {
if (row.desc !== null && row.desc.length > 15) {
return row.desc.substring(0, 15) + '...'
}
return row.desc
}
</script>