亲宝软件园·资讯

展开

ElementUI table自定义表头Tooltip文字提示

1024_Byte 人气:0

实现效果

ElementUI文档

el-table组件

  <el-table-column label="水位高程(m)" header-align="center" align="center">
          <el-table-column
            prop="swlel"
            label="传感器监测"
            align="center"
            :render-header="(h, { column }) => renderHeaderMethods(h, { column }, '来源:传感器监测数据')"
          ></el-table-column>
          <el-table-column
            prop="mwlel"
            label="人工监测计算"
            align="center"
            :render-header="(h, { column }) => renderHeaderMethods(h, { column }, '人工监测计算=测点孔口高程-绳长')"
          ></el-table-column>
        </el-table-column>
        <el-table-column
          prop="error"
          label="误差"
          align="center"
          :render-header="(h, { column }) => renderHeaderMethods(h, { column }, '误差=人工监测计算(水位高程)-传感器监测(水位高程)')"
        ></el-table-column>

tooltip组件

<template>
  <div class="tooltip">
    <el-tooltip placement="bottom" popper-class="atooltip" :visible-arrow="false">
      <div slot="content">
        <!-- 插槽,可提供多行的提示信息 -->
        <!-- 全局组件,这里是配置图标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绑定的方法

 // 自定义表格
    // 例如:给表头 地址 加一个 icon,鼠标移入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]
          }
        })
      ])
    },

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。

加载全部内容

相关教程
猜你喜欢
用户评论