。

基本沿用element-plus的前端使用模式#xff0c;让表单表格变的非常容易。

这个的供应商插件#xff0c;当使用filterable后#xff0c;点击表格重的选项他里面有个formTable可以解决很多订单明细保存得问题。

基本沿用element-plus的前端使用模式让表单表格变的非常容易。

这个的供应商插件当使用filterable后点击表格重的选项下拉的表格不会关闭。

去掉filterable就可以了

sc-table-select

label编码/el-table-columnel-table-column

propname

label名称/el-table-columnel-table-column

propcontacts

label联系人/el-table-columnel-table-column

propphone

label手机号/el-table-columnel-table-column

propaddress

label地址/el-table-columnel-table-column

propcreditCode

label统一社会信用代码/el-table-column/sc-table-select网上有不少同类型的问题element

el-select

是不是visible-change没搞懂是怎么回事于是按照这个思路去调查el-select内嵌套el-select—筛选下拉列表遇到的若干问题及解决

el-select二次封装解决数据量太大导致卡顿问题实现远程搜索滚动加载数据搜索数据回显

visible-change对应的参数官方只有一个这个跟网上有些资料不一致可能是版本不同。

因此推断当select展开的时候就会触发visible-change这个事件那么什么时候可以触发展开呢不会不会只要有值输入进去就会触发呢

element-UI之el-select的坑这个有类似的问题但是却没有解决方案。

在别人的基础上增加了hasClick点击了做一个标记然后再清理的时候恢复。

templateel-select

:collapse-tags-tooltipcollapseTagsTooltip

:disableddisabled

classsc-table-select__headerslot

nameheader

:submitformSubmit/slot/divel-table

reftable

:highlight-current-row!multiple

row-dblclickclick

width45/el-table-columnel-table-column

v-else

#defaultscopespan{{scope.$index(currentPage

pageSize

1}}/span/template/el-table-columnslot/slot/el-tablediv

classsc-table-select__pageel-pagination

small

current-changereload/el-pagination/div/div/template/el-select

config

config.request.pageSize,keyword:

config.request.keyword},formData:

{},select:,hasClick:false,}},computed:

{},watch:

{modelValue:{handler(){this.defaultValue

this.modelValuethis.autoCurrentLabel()},deep:

true}},mounted()

Object.assign(this.defaultProps,

this.modelValuethis.autoCurrentLabel()},methods:

focus

事件);},//表格显示隐藏回调visibleChange(visible){if(visible){if

(this.hasClick){this.blur()return

;}this.currentPage

{}this.getData()}else{this.autoCurrentLabel()}},//获取表格数据async

true;var

this.currentPage,[this.defaultProps.pageSize]:

this.pageSize,[this.defaultProps.keyword]:

this.keyword,//

asId:userInfo.value.currentAsId}Object.assign(reqData,

this.params,

config.parseData(res)this.tableData

false;//表格默认赋值this.$nextTick(()

{if(this.multiple){this.defaultValue.forEach(row

{var

item[this.defaultProps.value]row[this.defaultProps.value]

)if(setrow.length

0){this.$refs.table.toggleRowSelection(setrow[0],

true);}})}else{var

item[this.defaultProps.value]this.defaultValue[this.defaultProps.value]

)this.$refs.table.setCurrentRow(setrow[0]);}this.$refs.table.setScrollTop(0)})},//插糟表单提交formSubmit(){this.currentPage

1this.keyword

nullthis.getData()},//分页刷新表格reload(){this.getData()},//自动模拟options赋值autoCurrentLabel(){this.$nextTick(()

{if(this.multiple){this.$refs.select.selected.forEach(item

{item.currentLabel

item.value[this.defaultProps.label]})}else{this.$refs.select.selectedLabel

this.defaultValue[this.defaultProps.label]}})},//表格勾选事件select(rows,

row){var

-1if(isSelect){this.defaultValue.push(row)}else{this.defaultValue.splice(this.defaultValue.findIndex(item

1)}this.autoCurrentLabel()this.$emit(update:modelValue,

this.defaultValue);this.$emit(change,

this.defaultValue);},//表格全选事件selectAll(rows){var

isAllSelect

0if(isAllSelect){rows.forEach(row

{var

row[this.defaultProps.value])if(!isHas){this.defaultValue.push(row)}})}else{this.tableData.forEach(row

{var

row[this.defaultProps.value])if(isHas){this.defaultValue.splice(this.defaultValue.findIndex(item

1)}})}this.autoCurrentLabel()this.$emit(update:modelValue,

this.defaultValue);this.$emit(change,

this.defaultValue);},click(row){if(this.multiple){//处理多选点击行}else{this.hasClick

rowthis.blur()this.autoCurrentLabel()this.$emit(update:modelValue,

this.defaultValue);this.$emit(change,

this.defaultValue);}},//tags删除后回调removeTag(tag){var

row

this.findRowByKey(tag[this.defaultProps.value])this.$refs.table.toggleRowSelection(row,

false);this.$emit(update:modelValue,

this.defaultValue);},//清空后的回调clear(){this.$emit(update:modelValue,

this.defaultValue);this.hasClick

false;},//

value)},filterMethod(keyword){console.log(click,this.hasClick)if

false;}if(!keyword){this.keyword

null;return

触发select隐藏blur(){this.$refs.select.blur();},//

触发select显示focus(){this.$refs.select.focus();}}}

/scriptstyle

{padding:12px;}.sc-table-select__page

{padding-top: