在el-table中循环展示所有列，并为某一列添加文字提示el-tooltip的项目案例

最新推荐文章于 2024-09-02 14:10:29 发布

小川同学77

最新推荐文章于 2024-09-02 14:10:29 发布

阅读量884

点赞数 8

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/HPlove__77/article/details/135835936

版权

本文介绍了如何在项目开发中，利用ElementUI的el-table和el-tooltip组件实现列表中删除数据的备注信息提示，当备注字数不超过20个字符时显示提示，超出则不显示，同时提供了相关代码片段进行解析。

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

在最近的项目开发中，有一个需求需要查询删除数据并在列表中展示，其中的“备注”列需要将删除的时候添加的备注信息进行文字提示，同时备注列中的数据不能超过20个字符。提示文字在鼠标悬浮上进行展示。完成后的效果如下图：

当备注信息文字不超过20字符时，鼠标悬浮不显示提示文字，效果如下：

附上代码一一解析

<el-table
          border
          header-cell-class-name="header-call-style"
          v-loading="loading"
          stripe
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            v-for="item in tableCols"
            :key="item.prop"
            :formatter="item.formatter"
            align="center"
            ><template slot-scope="scope">
              <el-tooltip
                :disabled="
                  item.label != '备注' ||
                  String(scope.row[item.prop]).length <= 20
                "
                effect="dark"
                :content="String(scope.row[item.prop])"
                placement="bottom"
              >
                <div v-if="item.label == '备注'">
                  {{ String(scope.row[item.prop]).substr(0, 20) }}
                </div>
                <div v-else>
                  {{ String(scope.row[item.prop]) }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

el-table-column通过tableCols列表项循环。循环内容对应列表的表头。

template内容通过插槽的方式替换原有内容，只不过是对想要替换的部分替换，不需要替换的部分还是按照之前的内容展示。最后需要注意的是：content = scope.row[item.prop]中的内容是会匹配所有列表的内容，需要将其转化为字符串类型才能展示（如果没有转换也能展示，但是我在开发过程中会有报错所以要进行转换）。
最后，如果这样的方式有问题，欢迎大佬来帮我改正，也欢迎在评论区积极讨论互相学习。