element ui-表头自定义提示框

禾苗种树

已于 2023-09-28 14:19:02 修改

阅读量565

点赞数

分类专栏： html UI插件文章标签： ui javascript elementui

于 2023-09-19 15:51:05 首次发布

本文链接：https://blog.csdn.net/m0_45011929/article/details/133031554

版权

html 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

UI插件

3 篇文章 0 订阅

订阅专栏

文章描述了如何在Element-UI的表格中，当鼠标悬浮到特定列头时，使用el-tooltip显示提示框，包括使用v-if/v-else条件和自定义popper-class样式。

摘要由CSDN通过智能技术生成

版本
“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>