Vue table表頭添加tip a-tooltip

Vue table表頭添加tip a-tooltip的使用

看實(shí)現(xiàn)效果圖：

代碼實(shí)現(xiàn)：

      <span slot="opened_keywords_title"> // 需要在那個(gè)表頭上添加tip
        已開通數(shù)量
        <a-tooltip>
          <template slot="title">統(tǒng)計(jì)該賬號(hào)下，開通客戶頁(yè)面填寫的關(guān)鍵詞數(shù)之和</template> // tip提示的內(nèi)容
          <a-icon type="question-circle" theme="twoTone" two-tone-color="#199ED8" /> // tip樣式
        </a-tooltip>
      </span>

script實(shí)現(xiàn)

天給大家分享 20 個(gè)高顏值的Tooltip 提示框，并且附帶源碼，大家可以直接復(fù)制使用~

代碼地址：https://uiverse.io/gharsh11032000/spotty-zebra-83

代碼地址：https://uiverse.io/escannord/spotty-jellyfish-36

代碼地址：https://uiverse.io/ayman-ashine/curvy-starfish-3

代碼地址：https://uiverse.io/vnuny/stale-mouse-74

代碼地址：https://uiverse.io/SelfMadeSystem/neat-emu-37

代碼地址：https://uiverse.io/barisdogansutcu/plastic-dolphin-67

代碼地址：https://uiverse.io/Invacui/smart-kangaroo-41

代碼地址：https://uiverse.io/ahmedyasserdev/wise-newt-71

代碼地址：https://uiverse.io/Yaya12085/average-earwig-11

代碼地址：https://uiverse.io/akshat-patel28/evil-lion-16

代碼地址：https://uiverse.io/Pipo-13/ugly-swan-20

代碼地址：https://uiverse.io/wilsondesouza/brave-earwig-75

代碼地址：https://uiverse.io/vinodjangid07/mighty-elephant-52

代碼地址：https://uiverse.io/MRez321/nice-stingray-21

代碼地址：https://uiverse.io/vikas7754/evil-mule-52

代碼地址：https://uiverse.io/Lakshay-art/sour-dragon-56

代碼地址：https://uiverse.io/Tsiangana/honest-bobcat-61

代碼地址：https://uiverse.io/Quezaquo/bitter-wolverine-27

代碼地址：https://uiverse.io/sahilxkhadka/modern-snail-66

代碼地址：hhttps://uiverse.io/akshat-patel28/cold-chicken-82

lement - Table 表格

用于展示多條結(jié)構(gòu)類似的數(shù)據(jù)，可對(duì)數(shù)據(jù)進(jìn)行排序、篩選、對(duì)比或其他自定義操作。

實(shí)現(xiàn)多選非常簡(jiǎn)單: 手動(dòng)添加一個(gè)el-table-column，設(shè)type屬性為selection即可；默認(rèn)情況下若內(nèi)容過(guò)多會(huì)折行顯示，若需要單行顯示可以使用show-overflow-tooltip屬性，它接受一個(gè)Boolean，為true時(shí)多余的內(nèi)容會(huì)在 hover 時(shí)以 tooltip 的形式顯示出來(lái)。

①添加一個(gè)表頭設(shè)置其類型 type="selection"，并設(shè)置表格的ref (ref可以獲取表格的dom元素)，給表格添加選中的方法@selection-change

②但是只有這些，并不能完全做到表格的多選，當(dāng)前表格的數(shù)據(jù)發(fā)生變化時(shí)，之前選中的數(shù)據(jù)會(huì)被清空，當(dāng)再次出現(xiàn)相同的數(shù)據(jù)時(shí)，并不會(huì)自動(dòng)選中，所以要添加一個(gè)表格選中的方法，當(dāng)頁(yè)面出現(xiàn)之前選擇過(guò)的數(shù)據(jù)時(shí)，頁(yè)面會(huì)再次選中。

③注意：在設(shè)置表格數(shù)據(jù)再次選中的方法時(shí)需要加上 this.$nextTick這個(gè)方法。

this.$nextTick這個(gè)方法作用是當(dāng)數(shù)據(jù)被修改后使用這個(gè)方法會(huì)回調(diào)獲取更新后的dom再渲染出來(lái)

在線咨詢

上一篇：學(xué)會(huì)設(shè)置title，提高網(wǎng)站抓取頻次，獲得更好排名
下一篇：Excel轉(zhuǎn)Word表格不變形，用網(wǎng)頁(yè)格式1分鐘搞定

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

Vue table表頭添加tip a-tooltip

lement - Table 表格

您的項(xiàng)目需求