Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
看實現效果圖:
代碼實現:
<span slot="opened_keywords_title"> // 需要在那個表頭上添加tip
已開通數量
<a-tooltip>
<template slot="title">統計該賬號下,開通客戶頁面填寫的關鍵詞數之和</template> // tip提示的內容
<a-icon type="question-circle" theme="twoTone" two-tone-color="#199ED8" /> // tip樣式
</a-tooltip>
</span>
script實現
天給大家分享 20 個高顏值的Tooltip 提示框,并且附帶源碼,大家可以直接復制使用~
代碼地址: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
用于展示多條結構類似的數據,可對數據進行排序、篩選、對比或其他自定義操作。
實現多選非常簡單: 手動添加一個el-table-column,設type屬性為selection即可;默認情況下若內容過多會折行顯示,若需要單行顯示可以使用show-overflow-tooltip屬性,它接受一個Boolean,為true時多余的內容會在 hover 時以 tooltip 的形式顯示出來。
①添加一個表頭 設置其類型 type="selection",并設置表格的ref (ref可以獲取表格的dom元素),給表格添加選中的方法@selection-change
②但是只有這些,并不能完全做到表格的多選,當前表格的數據發生變化時,之前選中的數據會被清空,當再次出現相同的數據時,并不會自動選中,所以要添加一個表格選中的方法,當頁面出現之前選擇過的數據時,頁面會再次選中。
③注意:在設置表格數據再次選中的方法時需要加上 this.$nextTick這個方法。
this.$nextTick這個方法作用是當數據被修改后使用這個方法會回調獲取更新后的dom再渲染出來
*請認真填寫需求信息,我們會在24小時內與您取得聯系。