elementui el-table中如何給表頭 el-table-column 加一個鼠標移入提示說明

更新時間：2024年11月15日 14:48:55 作者：向明天乄

本文通過實例代碼介紹如何在使用Element UI的el-table組件時為表頭添加提示功能,通過結(jié)合el-tooltip組件實現(xiàn)鼠標移入時顯示提示信息,感興趣的朋友跟隨小編一起看看吧

elementui el-table中給表頭 el-table-column 加一個鼠標移入提示說明

前言

在使用el-table 表格中有些表格的表頭需要加入一些提示，鼠標移入則出現(xiàn)提示，非常實用，我是通過el-table中的el-tooltip實現(xiàn)的，以下的效果預覽

代碼實現(xiàn)

  <el-table ref="multipleTable" :data="data" tooltip-effect="dark" border >
      <el-table-column prop="addtime" label="時間" align="center" width="150">
         <template slot="header">
            <div>
              <span>時間</span>
             <el-tooltip class="item" effect="dark" content="今日工單是操作工單時間，其他則是工單錄入時間" placement="top">
              <span class="iconfont icon-wenhao" style="margin-left: 5px;"></span>
              </el-tooltip>
            </div>
        </template>
        </el-table-column>
  </el-table>

補充：element-ui] el-table表格頭添加圖標-鼠標移入顯示el-tooltip提示信息

element-ui] el-table表格頭添加圖標-鼠標移入顯示el-tooltip提示信息

方法一、render-header=“renderPrice”(此方法無法使tooltip換行)

只是單純的想在table中添加圖標和tooltip

在el-table-column中綁定:render-header=“renderPrice”(此方法無法使tooltip換行)

 <el-table-column label="age" align="center" width="200">
</el-table-column>

renderPrice(h, { column, $index }) {
      return [
        column.label,
        h(
          'el-tooltip',
          {
            props: {
              content: '11111'
              placement: 'top'  // 懸停內(nèi)容展示的位置
            }
          },
          [h('span', { class: { 'el-icon-question': true }})] // 圖標
        )
      ]
    },

方法二、

使用組件插槽，elementui已封裝好

<el-table-column align="center" label="縮力" width="150px">
 <template v-slot:header='scope'>     // 插槽插入header
	 <span>
	   縮力
	  <el-tooltip
	    :aa="scope"
	    class="item"
	    effect="dark"
	    placement="top-start"
	   >
	   <i class="el-icon-question"> </i>
	   <div style="width: 200px" slot="content">
	           弱宮縮：宮縮持續(xù)20-30秒 <br />
	           中度宮縮：宮縮持續(xù)30-40秒<br />
	           強度宮縮：宮縮持續(xù)40秒以上
	   </div>
	  </el-tooltip>
	</span>
 </template>
 </el-table-column>

elementUI表格頭添加圖標-鼠標移入顯示el-tooltip提示信息

到此這篇關(guān)于elementui el-table中如何給表頭 el-table-column 加一個鼠標移入提示說明的文章就介紹到這了,更多相關(guān)elementui el-table鼠標移入提示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: