vue2 ElementUI 表单标签、表格表头添加问号图标提示

ゞ浴缸里的玫瑰 2023-10-10 15:38 39阅读 0赞

#### 文章目录 ####

*  1. 问题背景
 *  2. element-ui悬浮提示定义
 *  3. 基础
 *  4. 延申
 *  5. 参考

## 1. 问题背景 ##

使用element-ui有时候需要对表格的**表头**、表单的**标签**进行自定义，添加问号的悬浮提示。

要达到的效果，如图所示：

![在这里插入图片描述][8140ff275d2b440b8d6dff9af6863407.png]  
![在这里插入图片描述][d44aaa8a065e4bc1869161321a044ad9.png]

## 2. element-ui悬浮提示定义 ##

[https://element.eleme.cn/\#/zh-CN/component/tooltip][https_element.eleme.cn_zh-CN_component_tooltip]

<el-tooltip content="需要提示的内容" placement="top" effect="dark">
    	
      <el-button>Dark</el-button>
    </el-tooltip>

![在这里插入图片描述][4171afd2df6449b6b912fc5f8a6dd7fe.png]

## 3. 基础 ##

1.  定义问号图标，图标上方显示tooltip提示内容

**代码：**

<span>
      <el-tooltip placement="top">
        <div slot="content">
          Tips: 提示的内容
        </div>
        
        <i class="el-icon-question" />
      </el-tooltip>
    </span>

**实现效果：**  
![在这里插入图片描述][20ca374272e946bfb630fadfd9a0afd6.png]

1.  为什么不写content属性和里面的提示内容也能显示？

**官网明确定义了↓↓↓**

![在这里插入图片描述][af90c6a5c8504dbcb45a2dad92237fc3.png]

通过slot插槽完成content内容的定义，如上面代码 **div** 里面的内容：**一定要注意插槽的使用方式，未定义的插槽不能使用哦！**

<div slot="content">
       Tips: 提示的内容
     </div>

## 4. 延申 ##

1.  自定义表单标签的label，显示问号提示信息

**代码：**

<el-form-item label="itemLabel名字" label-width="155px">
      
      <template slot-scope="{}" slot="label">
        <span>itemLabel名字</span>
        <el-tooltip class="item" effect="dark" placement="top">
          
          <i class="el-icon-question" style="font-size: 14px; vertical-align: middle;"></i>
          
          <div slot="content">
              内容提示
          </div>
        </el-tooltip>
      </template>
      
      <template>
        <el-select v-model="data" size="small">
          <el-option label="A" value="A"></el-option>
          <el-option label="B" value="B"></el-option>
        </el-select>
      </template>
    </el-form-item>

**实现效果：**

![在这里插入图片描述][fa862fe854e44a0da982df07f5f080f0.png]

**使用的插槽：**

![在这里插入图片描述][acea50b19f084514a0a3a36221fb1400.png]

[https://element.eleme.cn/\#/zh-CN/component/form][https_element.eleme.cn_zh-CN_component_form]

1.  自定义表格表头提示信息，显示问号提示信息

**代码：**

<el-table-column prop="字段名" align="center" sortable min-width="180">
      
      <template slot-scope="{}" slot="header">
         
        <span>表头名</span>
        <el-tooltip class="item" effect="dark" placement="top">
          
          <i class="el-icon-question" style="font-size: 14px; vertical-align: middle;"></i>
          
          <div slot="content">
            <p>Tips：提示的内容</p>
          </div>
        </el-tooltip>
      </template>
      
      <template slot-scope="scope">
        {
       {scope.row.name }}
      </template>
    </el-table-column>

**实现效果：**  
![在这里插入图片描述][d44aaa8a065e4bc1869161321a044ad9.png]

**使用的插槽：**  
![在这里插入图片描述][dae5d0e0d9d840aba03d2368fb6d4f9b.png]

[https://element.eleme.cn/\#/zh-CN/component/table][https_element.eleme.cn_zh-CN_component_table]

注意！！！

以tooltip提示代码为基础，使用各标签支持的 **slot（插槽）** 哪里需要哪里插。

## 5. 参考 ##

*  [VUE系列之element表单el-form-item自定义label][VUE_element_el-form-item_label]
 *  [el-table表格怎么在表头的某项添加提示信息][el-table]
 *  [vue插槽（slot）详解][vue_slot]
 *  [如何理解Vue.js的组件中的slot?][Vue.js_slot]

[8140ff275d2b440b8d6dff9af6863407.png]: https://img-blog.csdnimg.cn/8140ff275d2b440b8d6dff9af6863407.png
[d44aaa8a065e4bc1869161321a044ad9.png]: https://img-blog.csdnimg.cn/d44aaa8a065e4bc1869161321a044ad9.png
[https_element.eleme.cn_zh-CN_component_tooltip]: https://element.eleme.cn/#/zh-CN/component/tooltip
[4171afd2df6449b6b912fc5f8a6dd7fe.png]: https://img-blog.csdnimg.cn/4171afd2df6449b6b912fc5f8a6dd7fe.png
[20ca374272e946bfb630fadfd9a0afd6.png]: https://img-blog.csdnimg.cn/20ca374272e946bfb630fadfd9a0afd6.png
[af90c6a5c8504dbcb45a2dad92237fc3.png]: https://img-blog.csdnimg.cn/af90c6a5c8504dbcb45a2dad92237fc3.png
[fa862fe854e44a0da982df07f5f080f0.png]: https://img-blog.csdnimg.cn/fa862fe854e44a0da982df07f5f080f0.png
[acea50b19f084514a0a3a36221fb1400.png]: https://img-blog.csdnimg.cn/acea50b19f084514a0a3a36221fb1400.png
[https_element.eleme.cn_zh-CN_component_form]: https://element.eleme.cn/#/zh-CN/component/form
[dae5d0e0d9d840aba03d2368fb6d4f9b.png]: https://img-blog.csdnimg.cn/dae5d0e0d9d840aba03d2368fb6d4f9b.png
[https_element.eleme.cn_zh-CN_component_table]: https://element.eleme.cn/#/zh-CN/component/table
[VUE_element_el-form-item_label]: https://www.cnblogs.com/niyan/p/14837361.html
[el-table]: https://blog.csdn.net/migexiaoliang/article/details/126293191
[vue_slot]: https://zhuanlan.zhihu.com/p/114502325?from_voters_page=true
[Vue.js_slot]: https://www.zhihu.com/question/37548226?sort=created