TDesign組件庫日常應用的一些注意事項

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

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

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

<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>

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

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

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

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

<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 = ["我是下拉文本數據，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數據，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數據，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數據，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數據，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數據，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數據，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數據，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數據，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數據，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數據，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數據，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數據，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數據，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數據，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數據，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數據，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數據，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長","我是下拉文本數據，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長",
];
</script>

解決方法：通過控制臺審查復選框樣式，發現t-select選擇器popup懸浮層默認最大寬度是1000px，最大高度是300px。官方提供了popupProps屬性可以透傳內部的懸浮層組件，此時可以配置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選擇器類似，當內容文本較長時，t-tree-select下拉樹選擇器組件的懸浮層限制最大寬度為1000px，最大高度為300px，同樣可以通過設置popupProps屬性，向內部的懸浮層組件透傳樣式。
示例：

        <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：動態配置表格列時，經常出現表格列錯亂、組件源碼報錯阻塞頁面進程等問題。

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

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

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