vue-element的 氣泡提示失效問題

問題:

頁面按鈕太多, 彈框很多, 但是有些不必要的, UI也沒說有限制,  我想用<el-tooltip>來根據不同狀態來用氣泡提示 ,

使用時<el-tooltip>經常用來包含<el-button>, 但是遇到<el-button>為禁用disabled=true的時候, 會失效.

 

解決辦法:

使用<span>來讓這些<el-button>塊成為內聯元素( ele的UI彈性布局 ,<el-col :span="24"> 布局很難操作 )

最終結果:

 

 

代碼:

<el-tooltip content="【查看】請先選中一條數據進行操作！"
                  :disabled="activeList && activeList.length == 1 ? true : false"
                  placement="top">
        <span>
          <el-button :disabled="activeList && activeList.length==1 ? false : true"
                     @click="handleButtonType('see')">查看</el-button>
        </span>

      </el-tooltip>
      <el-tooltip :disabled="activeList && activeList.length==1 && activeList[0].status == 'noaudit' ? true : false"
                  placement="top">
        <div slot="content">【修改】、【刪除】、【保存1】按鈕<br />僅可對狀態為保存1的數據進行操作！</div>
        <span class="mLeft10 mRight10">
          <el-button :disabled="activeList && activeList.length==1 && activeList[0].status == 'noaudit' ? false : true"
                     @click="handleButtonType('edit')">修改</el-button>
          <el-button :disabled="activeList && activeList.length==1 && activeList[0].status == 'noaudit' ? false : true"
                     @click="handleButtonType('del')">刪除</el-button>
          <el-button :disabled="activeList && activeList.length==1 && activeList[0].status == 'noaudit' ? false : true"
                     @click="handleButtonType('audit')">嗯嗯嗯</el-button>
        </span>
</el-tooltip>
<el-tooltip content="【保存】僅可對狀態為保存2的數據進行操作！"
                  :disabled="activeList && activeList.length==1 && activeList[0].status == 'audit' ? true : false"
                  placement="top">
        <span>
          <el-button type="primary"
                     :disabled="activeList && activeList.length==1 && activeList[0].status == 'audit' ? false : true"
                     @click="handleButtonType('noaudit')">保存2</el-button>
        </span>
</el-tooltip>