Vue+EleMentUI实现el-table-colum表格select下拉框可编辑
说明:
在进行采购入库的过程中,有必要对表格中的一行进行快速编辑保存,节省时间,提高工作效率!,而不是每次编辑都要弹窗才可编辑
源码:https://gitee.com/charlinchenlin/store-pos
效果图:
1、在data定义supplier数组等元素
data() {return { suppliers:[], //保存供应商数据 showInput: "", //用来判断是否显示哪个单元格oldData: {}, //用来存修改前的数据currentData: {}, //用来保存新的数据 }},
2、为el-table表格单击和双击添加tableDbEdit事件
<el-table :data="dataList" size="mini" v-loading="dataListLoading" @selection-change="selectionChangeHandle"style="width: 100%;" @cell-click="tableDbEdit" @cell-dblclick="tableDbEdit" height="320":header-cell-style="{ background: '#fcfcfc', color: '#606266', height:'36px'}"><el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>------</el-table>
控制是否显示select下拉框
tableDbEdit(row, column, event) {this.showInput = column.property + row.inboundId;this.oldData[column.property] = row[column.property];},
3、为供应商列添加下拉框
如果showInput的值与当前的inboundId相同,则显示下拉选项,否则显示数据信息
<el-table-column prop="supplierName" header-align="center" align="center" label="供应商名称" width="150" show-overflow-tooltip><template slot-scope="scope"><el-select size="mini" @focus="getSuppliers()" @click="getSuppliers()" @change='blurInput(scope.row, "supplierName", scope.row.supplierName)' v-model="scope.row.supplierName" clearablev-if="showInput == `supplierName${scope.row.inboundId}`"placeholder="请选择"><el-option v-for="item in suppliers" :key="item.supplierId" :label="item.supplierName" :value="item.supplierName"></el-option></el-select><span v-else class="active-input">{{scope.row.supplierName}}</span></template>
</el-table-column>
聚焦或单击时获取供应商数据
async getSuppliers() {const res = await this.$http({url: `/product/supplier/getSupplies`,method: 'get',params: this.$http.adornParams()})let data = res.dataif (data && data.code === 0) {this.suppliers = data.data}},
触发change事件时给当前列赋值,并设置供应商信息
// 当input失去光标后进行的操作async blurInput(row, name, value) {// 判断数据是否有所改变,如果数据有改变则调用修改接口if (this.oldData[name] != value) {row[name] = value }this.showInput = ""this.currentData = rowif(name === 'supplierName'){this.setSuppliers(row)}},setSuppliers(row) {for (let index in this.suppliers) {let item = this.suppliers[index]if (row.supplierName === item.supplierName) {row.supplierId = item.supplierIdreturn}}},
4、保存当前列,成功后重新加载数据
async saveHandle(row) {console.log("saveHandle row===", row)row.status = row.status ? 1 : 0const res = await this.$http({url: `/purchase/purchasesinboundorder/update`,method: 'post',data: this.$http.adornData(row)});let data = res.dataif (data && data.code !== 0) {row.status = !row.status;return this.$message.error('修改失败!');}this.$message.success('更新成功!');this.getDataList();},
5、定义v-focus
directives: {// 通过自定义指令实现的表单自动获得光标的操作focus: {inserted: function(el) {if (el.tagName.toLocaleLowerCase() == "input") {el.focus()} else {if (el.getElementsByTagName("input")) {el.getElementsByTagName("input")[0].focus()}}el.focus()}},focusTextarea: {inserted: function(el) {if (el.tagName.toLocaleLowerCase() == "textarea") {el.focus()} else {if (el.getElementsByTagName("textarea")) {el.getElementsByTagName("textarea")[0].focus()}}el.focus()}}},
Vue+EleMentUI实现el-table-colum表格select下拉框可编辑相关推荐
- php table 下拉框,LayerUI的table 里面加 select 下拉框 – Fly社区-Mikel
先上效果图: 直接上代码 //添加样式: .table-select-icon{position:absolute;right:10px;line-height:34px;color:#d3d3d3} ...
- select下拉框美化
http://dl.dbank.com/c04csxtesr 基本用法 单选下拉框的写法与传统的一样.支持TAB键打开和上下箭头选择option.支持onchange事件,见下面 选中项:2 代码如下 ...
- 编程案例——layui的table表格并获取选中的数据、layui监控select下拉框并将隐藏的div显示
layui table表格展示 效果 代码 前端代码 后端代码:我们需要注意后端给前端返回数据的格式 获取radio标签所对应的数据条目 问题描述 解决办法 layui监控select下拉框并将隐藏的 ...
- vue 的elementui中select下拉框多选项-multiple属性
vue的select下拉框多选项-multiple属性 最近在使用vue-element-admin这个后台管理框架开源模板在做一个管理后台,使用起来其实还挺方便的,大部分的组件源码里面都已经写好了, ...
- vue elementUI select下拉框设置默认值
关于element select框默认值赋值不成功问题,注意两点: v-model里面的数据和遍历出来value值数据类型不一样.!!!! (例:item.provinces类型是number,pro ...
- antd vue 多个下拉 联动_antd中select下拉框值为对象选中的问题
使用antd中的select下拉框,遇到个小问题,后台管理系统中,使用下拉框,一般不会是简单的就直接使用select中的value值,而是会使用id或者value中文对应的keyword,并且这个在o ...
- Vue中select下拉框的默认选中项的三种情况
在Vue中 使用select下拉框 主要靠的是 v-model 来绑定选项 option 的 value 值. select下拉框在界面的展示,我们都希望看到框中有一个值 而不是空白,比如显示 &qu ...
- element-ui select下拉框 设置默认值
参考于 carmen_shao的element-ui select下拉框默认值的问题 需要把el-select绑定的sPerforIndicator.id 和 el-option中的 :value=& ...
- ElementUI:多个Select下拉框存在时调整个别下拉框样式
当dialog中存在多个下拉框的时候,想改变某一个下拉框的样式,于是给某一个select绑定类,发现并没有生效,换了一种方法,将el-select用div包裹,将类绑定在div上,也没有效果. 在控制 ...
最新文章
- Android getLocationInWindow
- showSoftInput不起作用
- POJ1063 Flip and Shift
- SAP Spartacus popover Component 的单元测试
- “那不勒斯”服务器芯片,32核/64超线程:AMD 公开 Naples “那不勒斯” 部分规格和性能...
- 资源字典——程序集之间的资源共享
- [Python] 将两个列表合并为字典
- 关于离散平稳信源的扩展信源的简单性质的练习题目(扩展信源划重点
- eyoucms 网页制作软件有哪些 这些你都知道吗
- 电压采集采样电路设计
- 【CVPR2021】论文汇总列表--Part1
- 评估电源质量20M带宽限制的问题
- python 500行 小项目 --- 简单对象模型
- 思科路由器——静态路由超级详细
- 腾讯微信面试题:侧重科班基础
- Java经典面试:源码解读及如何保证线程安全
- unzip解压缩linux文件时出现error [Testing.zip]: start of central directory not found;zipfile corrupt——7z
- HTTP 404错误你知道是什么意思吗
- 图片延迟加载对seo有什么影响呢?
- 有利可图网_如何发布自己的流行且有利可图的开源书