一、事情的起因 表格里有勾选框,还有操作按钮,如下图 等功能开发完后,需求临时说要加一个行点击也能选中的功能, 心想,加就加呗,直接一个梭哈,在el-table表格里加上 @row-click="handleRowClick", 然后就提交了 功能倒是能用,就是点击按钮的时候也触发了,果不其然被测试打回重写(狗头) 二、事情的经过 ...
表格用el-table实现,操作列的编辑按钮点击事件正常实现。现要为行加一点击事件,即row-click。加上后,发现点击操作列的编辑按钮时,会触发按钮本身事件,同时会触发行点击事件。第一版代码如下: <template> <el-table :data="tableData" border @row-click="rowClick"> <el-table-column prop="date" label="日...
P40第39学时 el-table编辑按钮、删除按钮封装 47:36 P41第40学时 筛选组件 el-form 封装与el-table搜索交互 1:23:10 P42第40-2学时 筛选组件 el-form 传参优化,封装 upload 组件 1:04:15 P43第41学时 web端 - 准备工作,多个接口跨域配置 35:50 ...
table.insertBefore(footer, body) // 在合计行的最后一列添加按钮 let html = table.querySelectorAll('td')[5].querySelector('.cell') html.innerHTML = "<el-button size='mini' style='padding: 7px 15px;font-size:12px;border-radius:3px;display: inline-block;display: inline-block;line-heig...
先看效果图:最右侧加号按钮可在下方列表添加一行空数据,同时在后面放一个保存按钮,可在列里进行下拉框和输入框等操作,选择好,填好数据,点击后面的保存按钮即可保存调用后端接口即可保存当前数据! Html代码: <!-- 下面表格数据,添加操作区 --> <el-table :data="standardTable" stripe style="width: 100%" ma...
如上图,这是很常见的element-ui里的table表格 有时候右侧固定操作列按钮很多,而且要根据不同的条件进行显示隐藏,当我们给操作列固定宽度的时候,就会出现明明一页表格里的按钮就1-2个,但是空白贼大,甲方不能忍,只好优化一下咯 干起来! 具体实现: 实现原理: 使用vue的指令实现 + 在对应的页面增加了些配置代码 ...
(footer,body)// 在合计行的最后一列添加按钮lethtml=table.querySelectorAll('td')[5].querySelector('.cell')html.innerHTML="<el-button size='mini' style='padding: 7px 15px;font-size:12px;border-radius:3px;display: inline-block;display: inline-block;line-height: 1;white-space: nowrap;...
<el-table> <el-table-column > <template> <el-button @click="todetail(scope.row)"> // 表单里面的操作按钮button,绑定个点击 事件点击传值scope.row <el-dialog> // 弹框 <a v-if="tanga" /> // 子组件a 判断tanga是true还是false。如果绑定true则a弹出来 <b v-else-if="tangb" /> //...
1.控制展开还是折叠的操作按钮 <el-table-columnlabel=""width="61"><templateslot-scope="scope">//这里用 expandItem 属性用来存储上一次点击的是哪行数据,以此来判断是展开还是折叠,显示向右或是向下的箭头<i:class="expandItem.dictId == scope.row.dictId ? 'el-icon-arrow-down' : 'el-icon-arrow...
(footer, body)// 在合计行的最后一列添加按钮let html = table.querySelectorAll('td')[5].querySelector('.cell')html.innerHTML = "<el-button size='mini' style='padding: 7px 15px;font-size:12px;border-radius:3px;display: inline-block;display: inline-block;line-height: 1;white-space:...