element-ui中table组件的表格嵌套Select,table中使用select
在table组件中,有一个<template slot-scope="scope"></template>,这个模板有一个slot-scope属性,这个属性的作用,等同于我们在给每个组件写CSS的时候,都会加上scoped的作用是一样的。也就是说,使用这样的一个模板,就能够让每一个下拉框都是独立的互不干扰的,但是我们需要做一些相应的改变。
不加这个属性,选项选不中
<el-table-column label="暂降原因" align="center">
<el-table-column>
<template slot-scope="scope">
<el-select v-model="bb" placeholder="暂降原因" style="width:110px" class="input-class">
<el-option label="短路故障" value="短路故障" />
<el-option label="变压器激磁" value="变压器激磁" />
<el-option label="电机启动" value="电机启动" />
<el-option label="不明原因" value="不明原因" />
</el-select>
</template>
</el-table-column>
</el-table-column>
element-ui中table组件的表格嵌套Select,table中使用select的更多相关文章
- vue问题三:element ui的upload组件上传图片成功和移除事件
element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
- Vue+element UI实现分页组件
介绍 这是一个是基于element-UI的分页组件基础上,进行了二次封装的分页组件,在展示数据时,该分页组件采用了每显示一页数据,只请求当前页面的数据的请求策略,从而避免了一次性将数据全部请求所造成的 ...
- 使用element-ui 的table 组件 出现表格线条不对齐的问题
在全局css样式中添加以下代码即可: body .el-table th.gutter { display: table-cell !important }
- element ui 弹出组件的遮罩层在弹出层的上面的解决方法
<el-dialog title="收货地址" :visible.sync="dialogFormVisible" :modal-append-to-bo ...
- 封装一个优雅的element ui表格组件
现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...
- element ui step组件在另一侧加时间轴显示
这是我开发的时候遇到的一个问题:项目需要在步骤条(竖直方向)的另一侧加时间显示,但是我在element ui 的step组件中一直没找着设置方法,所以就自己想了个办法加进来,效果如下: 代码如下,先上 ...
- element UI排坑记(一):判断tabs组件是否切换
之所以将这个问题列在排坑记之中,是因为官方组件的一个属性颇有些隐蔽,这个问题曾经折腾了本人较多时间,始终思维固着,且使用搜索引擎也不容易搜索到答案,故记之.然而实际解决却是相当简单的. 一.问题描述 ...
- Table 组件构建过程中遇到的问题与解决思路
在 GearCase 开源项目构建 Table 组件的过程中.遇到了各式各样的问题,最后尝试了各种方法去解决这些问题. 遇到的部分问题 checkbox 的全选和半选问题 table 组件的排序请求方 ...
随机推荐
- 引入Wukong让你的系统瞬间具备IOC能力
[Github源码] 本文重点要说的是如何通过引入Wukong第三方包让自己的系统能够拥有IOC容器能力,但在具体讲解步骤之前,还是想先简单的介绍一下什么是IOC以及它存在的意义:同时也就能清楚Wuk ...
- 一键生成通用高亮代码块到剪贴板,快捷粘贴兼容 TT/WX/BJ 编辑器
有些在线图文编辑器不支持直接插入代码块,但可以直接粘贴 HTML 格式的高亮代码块. 花了一点时间研究了一下各家的编辑器,规则却各不相同.有的要求代码块被包含于 <code> ... &l ...
- TomCat之安装
TomCat 之安装(伪分布式版本) 本次安装是使用的伪分布式的安装(即一台机器安装两个tomcat) 1.通过scp导入tomcat安装包 2.解压缩成俩个文件 3.修改第一个tomcat的配置文件 ...
- 【ps下载与安装】Adobe Photoshop 2022 for Mac v23.5 中文永久版下载 Ps图像编辑软件
Adobe Photoshop 2022 mac破解版,是一款Ps图像编辑软件,同时支持M1/M2芯片和Intel芯片安装,此主要的更新包括多个新增和改进的功能,例如改进的对象选择工具,其悬停功能可预 ...
- 十、RHEL Podman命令
Podman介绍 Podman 是一个开源的容器运行时项目,可在大多数 Linux 平台上使用.Podman 提供与 Docker 非常相似的功能.正如前面提到的那样,它不需要在你的系统上运行任何守护 ...
- 微信小程序之顶部导航栏
wxml: <!--导航条--><view class="navbar"> <text wx:for="{{navbar}}" d ...
- Mysql+Mycat+NFS+Rsync+LVS+DNS+IPtables综合实验
1.环境准备 服务器 IP地址 作用 系统版本 Mysql-master eth0:10.0.0.58 主数据库 Rocky8.6 Mysql-slave1 eth0:10.0.0.68 备数据库 R ...
- Codeforces Round #833 (Div. 2) A-D.md
比赛链接 A 题解 知识点:数学. 注意到 \(n\) 为奇数时,不考虑连续性,一共有 \(\lceil \frac{n}{2} \rceil ^2\) 个格子,接下来证明一定能凑成方块. 从下往上从 ...
- 3.JS
1.简介 JavaScript 因为互联网而生,紧随着浏览器的出现而问世 1997年7月,ECMAScript 1.0发布. 1998年6月,ECMAScript 2.0版发布. 1999年12月,E ...
- C#使用正则表达式来验证是否是16进制字符串
/// <summary> /// 判断是否为16进制字符串 /// </summary> /// <param name="hexString"&g ...