广东省住房城乡建设厅网站,店铺怎么做推广和宣传,厦门seo网站排名优化,体育新闻最新消息由于业务场景的复杂性#xff0c;需实现#xff1a;在 el-table 表格中 嵌入 el-checkbox 多选框 及 el-input 输入框 及 el-upload 上传组件 #xff0c;先附上实现效果图。 从图片可以看出其实就是一个规格可以带有多个属性的规格表#xff0c;实现此效果需涉及到的知识点…由于业务场景的复杂性需实现在 el-table 表格中 嵌入 el-checkbox 多选框 及 el-input 输入框 及 el-upload 上传组件 先附上实现效果图。 从图片可以看出其实就是一个规格可以带有多个属性的规格表实现此效果需涉及到的知识点大概有以下
阻止冒泡this.$set() 动态绑定图片上传预览Scoped slot 获取到 table 内部的状态管理数据…
首先搭建表格框架固定两列这个比较简单
el-tableel-table-columnproplabel规格width220px/el-table-columnel-table-columnproplabel属性width660px/el-table-column
/el-table由于行数不固定行内容非普通的静态数据展示故需用到 slot 来自定义
:data 属性绑定 commodityPropertyList数据scope 获取 row, column, $index 和 store 等的表格内部数据
实现表格第一列
el-table:datacommodityPropertyListstylewidth: 100%el-table-columnproplabel规格width220pxtemplate slot-scopescopespan stylefont-size: 14px;{{scope.row.propertyName}}/spani stylemargin-left: 10px; classel-icon-delete clickdeleteProperty(scope) /idiv styledisplay: flex;align-items: center;cursor: pointer; classproperty clickchangeGPicFlag(scope)i v-ifscope.row.gPicFlag 1 classel-icon-circle-check/ii classel-icon-circle-close v-else/idiv开启图片上传/div/div/template/el-table-columnel-table-columnproplabel属性width660px/el-table-column
/el-table补充表格第二列
el-table:datacommodityPropertyListstylewidth: 100%el-table-columnproplabel规格width220pxtemplate slot-scopescopespan stylefont-size: 14px;{{scope.row.propertyName}}/spani stylemargin-left: 10px; classel-icon-delete clickdeleteProperty(scope) /idiv styledisplay: flex;align-items: center;cursor: pointer; classproperty clickchangeGPicFlag(scope)i v-ifscope.row.gPicFlag 1 classel-icon-circle-check/ii classel-icon-circle-close v-else/idiv开启图片上传/div/div/template/el-table-columnel-table-columnproplabel属性width660pxtemplate slot-scopescopeel-checkbox-group v-modelcheckPropertyListel-checkbox v-for(item1,index) in scope.row.options :labelitem1 :keyitem1.id :disabledpageType viewdiv styledisplay: flex;justify-content: center;align-items: center;margin-bottom: 20px;div stylewidth: 50%;font-size: 14px;{{item1.optionValue}}/divel-input :disabledpageType view stylemargin-right: 20px; sizemini v-modelitem1.optionAlias placeholder备注(可选)/el-inputel-input :disabledpageType view sizemini v-modelitem1.optionSort placeholder排序输入数字/el-inputspan v-ifscope.row.gPicFlag 1 stylemargin-left: 20px;div v-ifitem1.gPicUrl styledisplay: inline;el-image refpreview2 :preview-src-list[showgPicUrl] stylewidth: 20px;height: 20px; :srcitem1.gPicUrl/el-imagei click.stop.preventdeleteImage(scope,index) v-ifpageType ! view stylemargin-left: 10px;font-size: 12px; classel-icon-delete /ii stylemargin-left: 10px;font-size: 12px; click.stop.preventpreviewImage2(scope,index) classel-icon-view/i/divel-upload v-show!item1.gPicUrl pageType ! view refupload classinsert-block styledisplay: inline-block; vertical-align: top; margin-right: 8px;action/api/mdm/upload/image :limit1 accept.jpg,.jpeg,.png :on-successhandleSuccess2 :on-errorhandleFormatError:file-listimgFilesListOfOnce :show-file-listfalsei slotdefault click.stop.preventuploadImage(scope,index) classel-icon-upload2/i/el-uploadspan尺寸800*800px最多1张/span/span/div/el-checkbox/el-checkbox-group/template/el-table-column
/el-table到此表格的页面及样式已基本完成接下来还需处理事件逻辑。
表格第一列事件处理
changeGPicFlag(scope) {if(this.pageType view) {return}this.commodityPropertyList.forEach((item,index) {if(index scope.$index) {item.gPicFlag item.gPicFlag 1 ? 0 : 1}})this.commodityPropertyList [...this.commodityPropertyList]}表格第二列事件处理
deleteImage(scope,index) {this.commodityPropertyList[scope.$index].options[index].gPicUrl this.commodityPropertyList [...this.commodityPropertyList] //实时更新修改的数据
},previewImage2(scope,index) {this.showgPicUrl this.commodityPropertyList[scope.$index].options[index].gPicUrlthis.$refs.preview2[0].showViewer true
},uploadImage(scope,index) {let num 0let list []list this.commodityPropertyList.filter((item,index) index scope.$index)list.forEach(item { num item.options.length})//阻止冒泡到选checkboxthis.upload2Flag.propertyIndex scope.$indexthis.upload2Flag.optionsIndex indexthis.$refs[upload][numindex].$refs[upload-inner].handleClick()
},表格“属性”列由 多选框checkbox、输入框input、 图片上传upload 等组件组成从代码可看出 checkbox-group 包裹 input等组件所以当在输入框输入或点击上传图片等操作时都会触发勾选/取消勾选多选框。这效果不是我们想要的我们只是想操作上传图片所以需要在定义事件时加 click.stop.prevent 事件名 来阻止冒泡阻止触发勾选操作 于是又有问题出现了当在 el-upload 组件加上 click.stop.prevent 事件名 时你会发现操作点击时不会触发弹出选择文件窗口这是因为加了阻止冒泡后没有触发到选择文件的操作这就需要我们自己在事件处理中写逻辑去触发。
1.需要在 el-upload 组件定义 ref 2.用 index 结合 num 找出被点击的那个 el-upload 组件 uploadImage(scope,index) {let num 0let list []list this.commodityPropertyList.filter((item,index) index scope.$index)list.forEach(item { num item.options.length})//阻止冒泡到选checkboxthis.upload2Flag.propertyIndex scope.$indexthis.upload2Flag.optionsIndex indexthis.$refs[upload][numindex].$refs[upload-inner].handleClick()//触发选择文件的弹窗},在实现的过程中我还碰到一个输入框不能输入的问题我操作输入之后没有动静再点击勾选操作时就可以正确显示出来了。于是我猜想了很多种可能并一一去验证 1.el-checkbox 不能包裹其他标签从网上搜集到很少有这样复杂地使用多选框 2.没有加 slot-scopescope ? …
最后在控制台打印后端返回的 commodityPropertyList 数据中发现其 options 数组下没有 optionAlias 和 optionSort 字段需要前端这边自己加最开始我是这样加的
//在commodityPropertyList获取数据的地方
......
this.commodityPropertyList.forEach((group) {if (group.options group.options.length) {group.options.forEach((item) {item.optionAlias item.optionSort var key item.propertyCode : item.optionCodevar prop this.propSpenMap.get(key)if (prop) {group.gPicFlag prop.gPicFlag 1 ? 1 : 0 propList.push(prop)this.checkPropertyList.push(item)}})}
})最后发现还是不可以于是我尝试 this.$set() 就可以了是因为 v-model 需要双向绑定而 this.$set() 则是启用了动态绑定
将上面代码的
item.optionAlias
item.optionSort 改成
this.$set(item,optionAlias,)
this.$set(item,optionSort,)
