feat(组件): 新增多选组件并优化钢卷选择器
新增MutiSelect多选组件,支持逗号分隔字符串绑定 优化CoilSelector组件,使用MutiSelect替换输入框并新增规格字段 移除多处钢种字段显示及输入 增强CoilNo组件,支持悬停显示钢卷详细信息 在收货详情页添加删除按钮功能
This commit is contained in:
40
klp-ui/src/components/MutiSelect/index.vue
Normal file
40
klp-ui/src/components/MutiSelect/index.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<el-select v-model="innerValue" multiple placeholder="请选择" filterable clearable :allow-create="allowAdd">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<!-- v-model上床绑定逗号分隔的字符串,可以props配置是否允许新增 -->
|
||||
<script>
|
||||
export default {
|
||||
name: 'MutiSelect',
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
allowAdd: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
// 计算属性捕获实现双向绑定
|
||||
computed: {
|
||||
innerValue: {
|
||||
get() {
|
||||
if (!this.value) {
|
||||
return [];
|
||||
}
|
||||
return this.value.split(',');
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('input', val.join(','));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user