ElementUI中利用table表格自定義表頭Tooltip文字提示

更新時(shí)間：2022年07月29日 10:15:21 作者：1024_Byte

這篇文章主要介紹了ElementUI中利用table表格自定義表頭Tooltip文字提示，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

實(shí)現(xiàn)效果

ElementUI文檔

el-table組件

  <el-table-column label="水位高程(m)" header-align="center" align="center">
          <el-table-column
            prop="swlel"
            label="傳感器監(jiān)測"
            align="center"
            :render-header="(h, { column }) => renderHeaderMethods(h, { column }, '來源：傳感器監(jiān)測數(shù)據(jù)')"
          ></el-table-column>
          <el-table-column
            prop="mwlel"
            label="人工監(jiān)測計(jì)算"
            align="center"
            :render-header="(h, { column }) => renderHeaderMethods(h, { column }, '人工監(jiān)測計(jì)算=測點(diǎn)孔口高程-繩長')"
          ></el-table-column>
        </el-table-column>
        <el-table-column
          prop="error"
          label="誤差"
          align="center"
          :render-header="(h, { column }) => renderHeaderMethods(h, { column }, '誤差=人工監(jiān)測計(jì)算（水位高程）-傳感器監(jiān)測（水位高程）')"
        ></el-table-column>

tooltip組件

<template>
  <div class="tooltip">
    <el-tooltip placement="bottom" popper-class="atooltip" :visible-arrow="false">
      <div slot="content">
        <!-- 插槽，可提供多行的提示信息 -->
        <!-- 全局組件，這里是配置圖標(biāo)icon和提示信息的地方 -->
        <!-- 在其他組件中引用方式詳見 table-header-tips.vue 組件中的 renderHeaderMethods 方法 -->
        <p v-for="(item, index) in messages" :key="index">{{ item }}</p>
      </div>
      <i class="el-icon-warning-outline" style="color: red; margin-left: 5px"></i>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: 'SpmonTootip',
  data() {
    return {}
  },
  props: {
    messages: {
      type: Array,
      default() {
        return []
      }
    }
  }
}

</script>
<style lang="scss">
.tooltip{
  padding: 0 !important;
}
.atooltip.el-tooltip__popper[x-placement^='right'] .popper__arrow {
  border-top-color: rgba(112, 182, 3, 0.811764705882353);
  color: #fff;
}
.atooltip.el-tooltip__popper[x-placement^='right'] .popper__arrow:after {
  border-top-color: rgba(112, 182, 3, 0.811764705882353);
  color: #fff;
}
.atooltip {
  background: rgba(112, 182, 3, 0.811764705882353) !important;
  color: #fff !important;
}
</style>

render-header綁定的方法

 // 自定義表格
    // 例如：給表頭 地址 加一個(gè) icon，鼠標(biāo)移入icon展示提示信息
    renderHeaderMethods(h, { column }, message) {
      return h('div', { style: 'display:inline-block;margin:auto;' }, [
        h('span', column.label),
        h('SpmonTootip', {
          // 引用組件
          props: {
            // messages 里面配置的信息即為 Tooltip 提示信息
            messages: [message]
          }
        })
      ])
    },

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: