相關(guān)文章

• 

  Vue 3 中 Ant Design Vue 如何自定義表格 Table 的表頭（列頭）內(nèi)容？

  項(xiàng)目用到的是 Ant Design Vue （2.2.8） 組件庫(kù)，開(kāi)發(fā)中遇到一個(gè)如下圖的表格，有些表頭文本后面會(huì)有一些自定義圖標(biāo)，鼠標(biāo)移入圖標(biāo)時(shí)顯示對(duì)應(yīng)的審批時(shí)間提示。當(dāng)前列如果沒(méi)有審批時(shí)間就會(huì)隱藏圖標(biāo)，只展示列頭文本。 使用 Ant Design Vue 基礎(chǔ)的 Table 組件是無(wú)法滿足這個(gè)場(chǎng)景的

  2024年02月16日

  瀏覽(24)
• 

  ant-design-vue的table表格行合并和列合并

  場(chǎng)景說(shuō)明： 1、列合并：需要在表格最后一列進(jìn)行合并，如圖： 思路：相當(dāng)于是第二列的最后一欄（colSpan ）占比5列，第2列后面的4列最后一行（colSpan ）占比0。 代碼示例 行合并需求如圖：將指定列的多行合并成一行 思路：和合并列差不多；第一列的第一行和第二行要合并

  2024年02月16日

  瀏覽(24)
• 

  保姆級(jí)教程：Ant Design Vue中 a-table 嵌套子表格

  前端為Ant Design Vue 版本為1.6.2，使用的是vue2 Ant Design Vue中 a-table 嵌套子表格，說(shuō)的可能稍微墨跡了點(diǎn)，不過(guò)重點(diǎn)內(nèi)容都說(shuō)的比較詳細(xì)，利于新人理解，高手可以自取完整代碼 下圖為官網(wǎng)圖，會(huì)在每行最前面多一個(gè)加號(hào)，點(diǎn)擊后會(huì)展開(kāi)，看到子表格的數(shù)據(jù) 子格嵌套從代碼層簡(jiǎn)

  2024年02月01日

  瀏覽(31)

• Ant Design Vue 中將 Table 表格中的數(shù)字類(lèi)型轉(zhuǎn)換為文字的方法詳解

  在使用 Ant Design Vue 開(kāi)發(fā)時(shí)，有時(shí)需要將 Table 表格中的數(shù)字類(lèi)型字段轉(zhuǎn)換為對(duì)應(yīng)的文字表示，以提供更直觀的數(shù)據(jù)展示。本文將詳細(xì)介紹在 Ant Design Vue 中將 Table 表格中的數(shù)字類(lèi)型轉(zhuǎn)換為文字的方法，幫助您靈活地處理數(shù)據(jù)展示需求。 在實(shí)際的應(yīng)用中，我們經(jīng)常會(huì)遇到需要將

  2024年02月11日

  瀏覽(49)

• [ant-design-vue] table組件列寬拖拽功能

  原有的樣式文件沒(méi)有使用的必要，個(gè)人添加的部分樣式內(nèi)容就符合需求了 vue3.x對(duì)應(yīng)的ant-design-vue中的table組件本身支持列寬的拖動(dòng)了，不需求額外的包的支持,根據(jù)Api說(shuō)明設(shè)置resizeColumn即可

  2024年01月23日

  瀏覽(28)

• vue的h渲染函數(shù)和customRender在ant design vue的table組件的使用

  使用ant design vue 的table組件,沒(méi)有使用插槽的情況下,我想你給我使用tooltip,這樣子我就不用又寫(xiě)插槽又寫(xiě)html結(jié)構(gòu)了 因?yàn)槲覀兪褂胻able組件,想自定義結(jié)構(gòu),一般是先使用插槽,然后插槽填寫(xiě)內(nèi)容,比如下面做法 這個(gè)時(shí)候我們可以使用組件列表 columns 說(shuō)明的 customRender 屬性來(lái)簡(jiǎn)化這一

  2024年02月13日

  瀏覽(20)

• ant-design-vue中table組件使用customRender渲染v-html

  ant-design-vue遇到table中列表數(shù)據(jù)需要高亮渲染 1、customRender可以使用，但是使用v-html發(fā)現(xiàn)不生效還報(bào)錯(cuò) 2、customRender函數(shù)返回肯定是jsx語(yǔ)法，于是發(fā)現(xiàn)這樣寫(xiě)可以

  2024年02月15日

  瀏覽(36)
• 

  Element UI 中的Table表格組件自定義行高與整個(gè)表格自適應(yīng)高度

  1、:header-row-style=\\\"{height:\\\'30px\\\'}\\\" 設(shè)置表格列標(biāo)題的高度為30像素。 2、:header-cell-style=\\\"{background:\\\'#f5f7fa\\\',padding:\\\'0px\\\'}\\\" 設(shè)置表格列標(biāo)題的背景顏色。 3、:row-style=\\\"{height:\\\'30px\\\'}\\\" 設(shè)置每行的高度為30像素。 4、height=\\\"calc(100vh - 150px)\\\" 設(shè)置整個(gè)表格的高度。因?yàn)橐赃m應(yīng)所以這個(gè)高度要用

  2024年02月12日

  瀏覽(27)
• 

  Ant Design Vue 修改表格頭部樣式

  在網(wǎng)上搜了好多修改表格頭部樣式的，最后自己摸索出來(lái)，分享給大家，最后附上完整代碼。 首先用到的是 customHeaderRow 這個(gè)API，類(lèi)型是一個(gè)函數(shù) 此圖是 console.log(conlumn); 打印出來(lái)的 可以看到每一列都有一個(gè)className

  2024年02月11日

  瀏覽(25)
• 

  如何vue使用ant design Vue中的select組件實(shí)現(xiàn)下拉分頁(yè)加載數(shù)據(jù)，并解決存在的一個(gè)問(wèn)題。

  ? ? 需求：拉下菜單中數(shù)據(jù)過(guò)多，200條以上，就會(huì)導(dǎo)致select組件卡死。所以需要使用滑動(dòng)到底部使其分頁(yè)加載 ? ? 可以借助 onPopupScroll 事件來(lái)監(jiān)聽(tīng)下拉菜單的滾動(dòng)事件，并判斷當(dāng)前是否已經(jīng)到達(dá)了下拉菜單底部。具體可以通過(guò)以下步驟實(shí)現(xiàn)： ? ? 1、在組件中綁定?@popupScro

  2023年04月20日

  瀏覽(38)