element-ui往表格插入图片、按钮、弹窗都可以

简介: element-ui往表格插入图片、按钮、弹窗都可以


通过 Scoped slot 可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据,


slot-scope="scope"  取到当前单元格


scope.row    获得当前的行数据


scope.$index   当前下标


添加图片

<el-table
      stripe="true"
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column prop="date" label="模型名称"> </el-table-column>
      <!-- //图片 -->
      <el-table-column label="公式">
        <template slot-scope="scope" v-if="scope.row.img">
          <el-popover placement="top-start" title="" trigger="hover">
            <img
              :src="scope.row.img"
              alt=""
            />
            <img
              slot="reference"
              :src="scope.row.img"
              style="width: 100px; height: 40px"
            />
          </el-popover>
        </template>
      </el-table-column>
</el-table>

image.png

添加按钮弹窗

1.<el-table-column prop="address" label="指标因子">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >查看</el-button
          >                      //scope.row获得当前的行数据,scope.$index当前下标
        </template>
</el-table-column>
<script>
handleEdit(index, row) {
      this.$alert(`111`, "指标因子", {
        confirmButtonText: "确定",
      });
    },
</script>

image.png

相关文章
|
2月前
|
JavaScript
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
|
2月前
|
前端开发 图形学 开发者
【独家揭秘】那些让你的游戏瞬间鲜活起来的Unity UI动画技巧:从零开始打造动态按钮,提升玩家交互体验的绝招大公开!
【9月更文挑战第1天】在游戏开发领域,Unity 是最受欢迎的游戏引擎之一,其强大的跨平台发布能力和丰富的功能集让开发者能够迅速打造出高质量的游戏。优秀的 UI 设计对于游戏至关重要,尤其是在手游市场,出色的 UI 能给玩家留下深刻的第一印象。Unity 的 UGUI 系统提供了一整套解决方案,包括 Canvas、Image 和 Button 等组件,支持添加各种动画效果。
135 3
|
3月前
|
前端开发 JavaScript UED
element-ui 表格数据究竟隐藏着怎样的神秘样式与格式化技巧?快来揭开谜底!
【8月更文挑战第22天】《element-ui 表格数据样式及格式化案例》展示了如何利用 element-ui 的表格组件实现美观且易读的数据展示。通过简单配置,可以自定义表格样式,如边框、背景色等,并通过 formatter 实现数据格式化,例如将成绩保留一位小数。此外,还能依据条件设置行样式,如成绩达优则高亮显示,从而增强用户体验和数据可读性。
65 1
|
3月前
|
JavaScript 开发者
Element UI & Element Plus之改变表格单元格颜色
这篇文章展示了如何在Element UI和Element Plus框架中使用`:cell-style`属性来根据条件改变表格单元格的颜色。
368 0
Element UI & Element Plus之改变表格单元格颜色
|
3月前
|
计算机视觉
ElementUI——vue2+element-ui 2.x的动态表格和表单
ElementUI——vue2+element-ui 2.x的动态表格和表单
134 1
|
3月前
|
前端开发 开发者 开发框架
JSF与Bootstrap,打造梦幻响应式网页!让你的应用跨设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,响应式设计至关重要,以确保不同设备上的良好用户体验。本文探讨了JSF(JavaServer Faces)与Bootstrap框架的结合使用,展示了如何构建响应式网页。JSF是一个基于Java的Web应用框架,提供丰富的UI组件和表单处理功能;而Bootstrap则是一个基于HTML、CSS和JavaScript的前端框架,专注于实现响应式设计。通过结合两者的优势,开发者能够更便捷地创建自适应布局,提升Web应用体验。然而,这种组合也有其局限性,如JSF组件库较小和较高的学习成本等,因此在选择开发框架时需综合考虑具体需求和应用场景。
50 0
|
3月前
|
JavaScript 前端开发 Shell
Element-ui Table表格导出功能的实现
Element-ui Table表格导出功能的实现
69 0
|
4月前
|
JavaScript API
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
596 0
|
4月前
|
前端开发
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
160 0
|
4月前
Element UI 表格【列宽自适应】
Element UI 表格【列宽自适应】
122 0