element ui-表头自定义提示框-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui-表头自定义提示框。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

版本
“element-ui”: “^2.15.5”,
需求：鼠标悬浮到该列表头，显示提示框
代码

	<el-table
        :data="xxxx"
       >
      <el-table-column  label="序号" width="40" type="index"  />
      <el-table-column
        v-for="(item) in xx2"
        :key="item.prop"
        :prop="item.prop"
        :label="item.lable"
        >
       // 表身插槽
        <template slot-scope="scope">
          <div
            v-if="scope.column.label !== 'xxx'">
            {{scope.row[scope.column.property] ? scope.row[scope.column.property] : '无'}}
          </div>
          <div v-else>
            <el-switch
              v-if="scope.column.label === '是否入伍'"
              v-model="scope.row[scope.column.property]"
              @change="changeSwitch(scope.column,scope.row,scope.$index)"
              active-text="是"
              inactive-text="否"
              active-value=1
              inactive-value=0
              >
            </el-switch>
          </div>
        </template>
		//  表头插槽+弹出提示框
        <template slot="header" slot-scope="scope">
          <span v-if="item.prop!='xxA'">{{ scope.column.label }}</span>
          // prop等于xxA 的有提示框
          <el-tooltip v-else  effect="dark" content="你想提示的弹框信息字段" placement="top">
              <span>{{ scope.column.label }}</span>
          </el-tooltip>
      </template>

		// 表身某一鼠标移入弹出提示框 重要的属性popper-class加类名 这个类的定义要另写一个单独的style里
		 <template slot-scope="scope">
			 <el-tooltip  effect="light" placement="right-start" popper-class="wh-slot">
	              <span>{{ scope.row.Name }}</span>
	              <div slot="content">
	                <p class="wh-slot-title">信息</p>
	                <p class="wh-slot-li"><span>所在班级：</span><span>{{ scope.row.xx}}</span></p>
	                <p class="wh-slot-li"><span>班主任：</span><span>{{ scope.row.nameB }}</span></p>
	              </div>
	          </el-tooltip>
  		</template>

      </el-table-column>
      </el-table>

// css
<style>
.wh-slot .wh-slot-title{
  text-align:center;
}
.wh-slot-li>span:nth-child(1){
  display: inline-block;
  width: 80px;
  text-align: right;
}
.wh-slot-li>span:nth-child(2){
  display: inline-block;
  width: 80px;
  /* text-align: right; */
}
</style>