element组件table表格/form表单显示弹窗的三种方式

一钱一

已于 2023-05-24 09:56:25 修改

阅读量4.3k

点赞数

文章标签： vue.js elementui 前端

于 2023-01-04 14:57:35 首次发布

本文链接：https://blog.csdn.net/weixin_69677630/article/details/128545402

版权

element组件table表格显示弹窗的两种方式

 <el-table-column
    label="地址"
    prop="Address"
    min-width="100px"
    :show-overflow-tooltip="true"
 >
    <template slot-scope="scope">
    // 方法一
      <el-popover placement="top-start" min-width="100%" trigger="hover">
           <div 
               style=" 
                   color: #fff;
                   background: #000;
                   position: relative;
                   left: -10%;
                    padding: 10px;
                  "
                >
                  {{ scope.row.tion }}
             </div>
             <span>
              {{ scope.row.tion }}
             </span>
        </el-popover>
    // 方法二
      <el-tooltip effect="light" content="提示框的内容" placement="top-start">
         <span>
            {{ scope.row.tion }}
         </span>
      </el-tooltip>
  
    </template>
 </el-table-column>

//方法三 是最简单的，利用了span标签的title属性
  <span :title="node.Id" class="tooltip">{{node.Id }}</span>

  <el-form-item label="状态" prop="state">
           //只需要在原表单添加以下
          <template slot-scope="{}" slot="label">
              <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">
                  巴拉巴拉文字
                </div>
              </el-tooltip>
            </template>
            <!-- el-form-item表单内容   -->
            <template>
          <el-select v-model="queryParams.state" placeholder="请选择">
            <el-option v-for="dict in state" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
        </template>
        </el-form-item>