el-table-column header标题hover, 显示文字提示popover

最新推荐文章于 2024-06-27 14:09:40 发布

qq_41737172

最新推荐文章于 2024-06-27 14:09:40 发布

阅读量715

点赞数 1

分类专栏： elementUI 文章标签： vue.js 前端 elementui

本文链接：https://blog.csdn.net/qq_41737172/article/details/128579482

版权

elementUI 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

在这里插入图片描述

         <el-table-column prop="name" label="供养或非供养" width="180">
            <template v-slot:header='scope'>
              <el-popover placement="top" title="" width="600" trigger="hover">
                <div>
                  <p style="font-size: 18px; font-weight: bold;">
                    <i class="el-icon-warning" style="font-size: 20px; color: #ffa000;"> </i>
                    供养规则提示
                  </p>
                  <p style="margin-left: 25px; line-height: 22px; font-size: 15px;">
                    父亲与祖父祖母需年满60周岁, 母亲需年满55周岁, 子女年龄要求未满18周岁。</br>
                    同时满足无工作, 未购买养老保险, 无退休金条件
                  </p>
                </div>
                <p slot="reference">供养或非供养 <i class="el-icon-warning"
                    style="font-size: 15px; color: #ffa000; margin-left: 15px;"> </i></p>
              </el-popover>
            </template>
            <template slot-scope="scope">
              <span v-if="type =='view'">{{ scope.row.maintain ? '供养' : ( scope.row.maintain==null ? '' : '非供养'
                )}}</span>
              <el-form-item v-else :prop="'familyList.' + scope.$index + '.maintain'" :rules="ruleForm.rules.maintain">
                <el-radio-group v-model="scope.row.maintain">
                  <el-radio :label="true" :disabled="scope.row.gyT">供养</el-radio>
                  <el-radio :label="false" :disabled="scope.row.gyF">非供养</el-radio>
                </el-radio-group>
              </el-form-item>
            </template>
          </el-table-column>