整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Vue table表头添加tip a-tooltip

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

看实现效果图:

代码实现:

      <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

lement - Table 表格

用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。

实现多选非常简单: 手动添加一个el-table-column,设type属性为selection即可;默认情况下若内容过多会折行显示,若需要单行显示可以使用show-overflow-tooltip属性,它接受一个Boolean,为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。

①添加一个表头 设置其类型 type="selection",并设置表格的ref (ref可以获取表格的dom元素),给表格添加选中的方法@selection-change

②但是只有这些,并不能完全做到表格的多选,当前表格的数据发生变化时,之前选中的数据会被清空,当再次出现相同的数据时,并不会自动选中,所以要添加一个表格选中的方法,当页面出现之前选择过的数据时,页面会再次选中。

③注意:在设置表格数据再次选中的方法时需要加上 this.$nextTick这个方法。

this.$nextTick这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再渲染出来