el-tooltip根据情况判断,控制显隐

某一列的某个字段是个树下拉,选完之后要调接口拿到一些数据,通过提示框展示

无数据的时候不要展示,有数据的时候才出现提示框
效果大致如下;
在这里插入图片描述
给tooltip加disabled属性,直接就不出来了
还好解决了,代码如下:

 <el-table-column label="xxx" align="center" prop="xxx" width="200">
                  <template slot-scope="scope">
                  
                    <el-tooltip placement="top-start" :disabled="tooltipForm.disabled">
                      <div slot="content">
                        <p>{{ tooltipForm.assetTypeName }}</p>
                        <p>
                          <span>xxx:</span>
                          <span style="padding: 0 5px"></span>
                          <span>xxx:</span>
                          <span>{{ tooltipForm.controType | controlFilter }}</span>
                          <span style="padding: 0 5px"></span>
                          <span>xxx:</span>
                          <span>{{ tooltipForm.capitaRation }}</span>
                          <span style="padding: 0 5px"></span>

                          <span>xxx:</span>
                          <span>{{ tooltipForm.priceCeiling }}</span>
                        </p>
                        <p>
                          <span>xxx:</span>
                          <span>{{ tooltipForm.qty }}{{ tooltipForm.qtyUnit | qtyFilters }}</span>
                          <span style="padding: 0 5px"></span>
                          <span>xxx:</span>
                          <span>{{ tooltipForm.qtyStartDate }}{{ tooltipForm.qtyUnit | qtyFilters }}</span>
                        </p>
                      </div>

                      <div @mouseover="mouseover(scope.row)">
                        <TreeSelect
                          v-if="scope.$index !== 0"
                          v-model="scope.row.assetTypeName"
                          :options="deptOptions"
                          clearable
                          :matchKeys="['name', 'code']"
                          
                          style="width: 200px"
                          :normalizer="normalizer"
                          :disable-branch-nodes="true"
                          :appendToBody="true"
                          @select="node => treeHandleSelect(scope.$index, node)"
                        >
                          <div slot="option-label" slot-scope="{ node }" :style="{ marginLeft: !node.raw.children ? '16px' : '0' }">
                            [{{ node.raw.code }}]{{ node.raw.label }}
                          </div>
                          <div slot="value-label" slot-scope="{ node }">{{ node.raw.code ? `[${node.raw.code}]` : '' }}{{ node.raw.label }}</div>
                        </TreeSelect>
                        <span v-else>{{ scope.row.assetTypeName }}</span>
                      </div>
                    </el-tooltip>
                  </template>
                </el-table-column>
  tooltipForm: {
        disabled: true,
      },

使用$set及时刷新数据,更新视图

// 列表悬浮窗移入
    mouseover(row) {
      // tooltip提示弹窗
      if ( row.assetTypeName == '') return this.$set(this.tooltipForm, 'disabled', true)

      getAuthBill(row.assetTypeName).then(res => {
        if (res && res.code == 200 && res.data.assetTypeName) {
          this.$set(this.tooltipForm, 'disabled', false)
          this.tooltipForm = res.data
        }
      })
    },
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
el-tooltipElement UI 中的一个组件,用于在鼠标悬停在元素上时显示提示信息。你可以通过自定义样式来修改 el-tooltip 的外观。 要自定义 el-tooltip 的样式,你可以使用以下几种方法: 1. 使用 Element UI 的自定义主题:你可以通过修改 Element UI 的主题样式来自定义 el-tooltip 的外观。具体的步骤可以参考 Element UI 的文档中关于自定义主题的部分。 2. 使用 CSS:你可以直接在你的项目中使用 CSS 来修改 el-tooltip 的样式。可以通过给 el-tooltip 添加 class 或者使用内联样式来进行修改。例如: ```html <el-tooltip class="custom-tooltip" content="This is a tooltip"> <span>Hover me</span> </el-tooltip> ``` ```css .custom-tooltip { background-color: red; color: white; } ``` 在上面的示例中,我们给 el-tooltip 添加了一个名为 "custom-tooltip" 的 class,并通过 CSS 将背景颜色设为红色,文字颜色设为白色。 3. 使用 Element UI 提供的 CSS 类名:Element UI 为 el-tooltip 提供了一些 CSS 类名,你可以通过给这些类名添加样式来修改 el-tooltip 的外观。例如: ```css .el-tooltip__popper { background-color: blue; color: white; } ``` 在上面的示例中,我们使用了 `.el-tooltip__popper` 类名来修改 el-tooltip 的弹出框样式,将背景颜色设为蓝色,文字颜色设为白色。 以上是一些常见的修改 el-tooltip 样式的方法,你可以根据自己的需求选择适合的方法来进行样式定制。希望能对你有所帮助!如果还有其他问题,请继续提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值