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

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

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

scope.row 获得当前的行数据

scope.$index 当前下标

添加图片

<el-tablestripe="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=""/><imgslot="reference":src="scope.row.img"style="width: 100px; height: 40px"/></el-popover></template></el-table-column>
</el-table>

添加按钮弹窗

<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>

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

element ui设置表格表头高度和每一行的高度
填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...
Element ui Switch 开关二次确认弹窗后再更改开关状态
Element ui Switch 开关二次确认弹窗后再更改开关状态 Switch 开关基本用法 Events 重点: 禁用状态 Switch 开关表示两种相互对立的状态间的切换,多用于触发「开/ ...
Element UI Table表格样式调整
调整Element UI Table表格的样式最终效果: 单元格合并,样式调整模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...
【论文写作】利用word表格插入图片和公式，以及段落的段前段后间距设置
公式:段前段后各6磅图片和段落之间:12磅小标题:段前6磅,段后12磅图片标题:段前6磅,段后12磅表格标题:段前12磅,段后6磅图标(a)(b)-段前段后均为0 表格插入公式可以看出,表 ...
element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现查看Element官网关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
element UI 修改表格边框颜色
element UI 修改表格边框颜色由于我只想要改变该页面的表格边框颜色,加上表格类名 /** 改变边框颜色*/.right-content .el-table--border, .el-tabl ...
【vue】Element UI实现表格表头纵向显示
element实现表格表头纵向显示我们正常使用Element UI写表格的时候,<el-table-column/> 标签里面都是纵向的.那么我们的需求有时候会要求行列转换,那么来看看咋 ...
Vue Element UI 之富文本图片上传服务器 + 图片地址插入富文本
该案例的情况 vue版本:vue cli3 插件:vue-quill-editor vue-quill-editor的增强模块:quill-image-extend-module quill-imag ...
在Element UI中表格根据数据动态变化显示表格的内容
需求对于Element UI里的表格,如果假设传入data的数据为数字(事实上其他的字母之类的也可)代表为表格的一些固定选项,而不是直接传入字符串,怎样实现替换.比如对于某个表格的选项,传入的数据用 ...

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

添加图片

添加按钮弹窗

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

最新文章

热门文章