• 【前言】Element（餓了么開源組件庫）在國內(nèi)使用的普及率和覆蓋率高于TDesign-vue（騰訊開源組件庫），這也導致日常開發(fā)遇到組件使用上的疑惑時，網(wǎng)上幾乎搜索不到其文章解決方案，只能深挖官方文檔或者提issue，以下記錄一些日常在vue3開發(fā)時部分組件使用的注意點：（持續(xù)更新中...）

一、?t-checkbox-group（復選框組）、t-checkbox（單個復選框）：

• 問題：固定容器寬度下，如果復選框文本過長時，復選框樣式變形被擠壓。
• 場景圖：
• 相關(guān)示例代碼：

<template><divstyle="width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;"><t-checkbox-groupstyle="width: 300px; margin-bottom: 16px"v-model="checked":options="['我是t-checkbox-group組件的文本，超長超長超長超長超長超長超長超長超長超長超長超長超長超長超長超長超長超長超長超長超長',]"></t-checkbox-group><t-checkbox v-model="checked1" style="width: 300px">我是t-checkbox組件的文本，超長超長超長超長超長超長超長超長超長超長超長超長超長超長超長超長超長超長超長超長超長</t-checkbox></div>
</template><script setup>
import { ref } from "vue";
const checked = ref([]);
</script>

• 解決方法：通過控制臺審查復選框樣式，發(fā)現(xiàn)復選框文本容器的父級使用了彈性盒子布局，將該容器作為內(nèi)聯(lián)塊級彈性伸縮盒顯示，此時可以使用深度選擇器修改復選框文本容器樣式。

<style lang="less" scoped>
:deep(.t-checkbox__label) {flex: 1;
}
</style>

二、t-select（下拉選擇器）

• 問題：當t-select選擇器下拉文本較長，且父級容易寬度或者高度比較小時，樣式展示效果不佳。
• 場景圖：
• 相關(guān)示例代碼

<template><divstyle="width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;padding-top: 20px;"><t-dialog :visible.sync="visible"><div class="flex-jc-ac"><t-select v-model="checked" style="width: 200px"><t-optionv-for="item in selectList":key="item":label="item":value="item"></t-option></t-select></div></t-dialog></div>
</template><script setup>
import { ref } from "vue";
const visible = ref(true);
const checked = ref([]);
const selectList = ["我是下拉文本數(shù)據(jù)，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數(shù)據(jù)，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數(shù)據(jù)，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數(shù)據(jù)，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數(shù)據(jù)，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數(shù)據(jù)，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數(shù)據(jù)，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數(shù)據(jù)，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數(shù)據(jù)，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數(shù)據(jù)，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數(shù)據(jù)，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數(shù)據(jù)，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數(shù)據(jù)，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數(shù)據(jù)，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數(shù)據(jù)，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數(shù)據(jù)，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數(shù)據(jù)，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數(shù)據(jù)，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數(shù)據(jù)，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長",
];
</script>

• 解決方法：通過控制臺審查復選框樣式，發(fā)現(xiàn)t-select選擇器popup懸浮層默認最大寬度是1000px，最大高度是300px。官方提供了popupProps屬性可以透傳內(nèi)部的懸浮層組件，此時可以配置popup的overlayInnerStyle屬性，配置最大寬度和高度。

        <t-selectv-model="checked"style="width: 200px":popup-props="{overlayInnerStyle: { maxHeight: '200px', maxWidth: '200px' },}"><t-optionv-for="item in selectList":key="item":label="item":value="item"></t-option></t-select>

三、t-tree-select（下拉樹選擇器）

• 問題：同t-select選擇器類似，當內(nèi)容文本較長時，t-tree-select下拉樹選擇器組件的懸浮層限制最大寬度為1000px，最大高度為300px，同樣可以通過設置popupProps屬性，向內(nèi)部的懸浮層組件透傳樣式。
• 示例：

        <t-tree-selectv-model="checked":data="selectList":tree-props="{keys: { label: 'name', value: 'id' },expandAll: true,}":popupProps="{overlayInnerStyle: {maxWidth: '400px',maxHeight: '200px',},}"></t-tree-select>

四、t-enhanced-table（樹形表格）

問題1：動態(tài)配置表格列時，經(jīng)常出現(xiàn)表格列錯亂、組件源碼報錯阻塞頁面進程等問題。

解決方法：給表格配置動態(tài)key，使vue強制重新渲染。

問題2：為了優(yōu)化界面交互，通常表格會添加loading，在表格請求前加載，在接口數(shù)據(jù)請求賦值完后關(guān)閉loading，有時接口報錯后會阻塞代碼繼續(xù)運行，導致loading一直存在。

解決方法：給方法添加try catch捕獲錯誤，在catch中重新將表格的loading關(guān)閉。