el-tooltip根据情况判断，控制显隐_el-tooltip appendtobody

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

无数据的时候不要展示，有数据的时候才出现提示框
效果大致如下;

给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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

  tooltipForm: {
        disabled: true,
      },
1
2
3

使用$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
        }
      })
    },
1
2
3
4
5
6
7
8
9
10
11
12