某一列的某个字段是个树下拉,选完之后要调接口拿到一些数据,通过提示框展示
无数据的时候不要展示,有数据的时候才出现提示框
效果大致如下;
给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
}
})
},