feat(CuteTransfer): 添加组件禁用功能并优化数据初始化

- 添加 disabled 属性支持全局禁用左右移动按钮
- 实现 value 变化时的数据重新初始化功能
- 在组件创建时自动初始化数据状态
- 简化演示页面数据源配置,移除冗余测试数据
- 优化数据同步逻辑,确保值变更时正确更新显示
This commit is contained in:
2026-02-08 09:02:18 +08:00
parent 8642d4e285
commit a989a808b6
2 changed files with 21 additions and 20 deletions
@@ -44,7 +44,7 @@
type="primary"
icon="el-icon-d-arrow-right"
size="small"
:disabled="leftSelection.length === 0"
:disabled="disabled || leftSelection.length === 0"
@click="onTransferRight"
/>
</el-row>
@@ -53,7 +53,7 @@
type="primary"
icon="el-icon-d-arrow-left"
size="small"
:disabled="rightSelection.length === 0"
:disabled="disabled || rightSelection.length === 0"
@click="onTransferLeft"
/>
</el-row>
@@ -125,6 +125,14 @@ export default {
type: Boolean,
required: false,
default: false
},
/**
* 是否禁用
*/
disabled: {
type: Boolean,
required: false,
default: false
}
},
data() {
@@ -141,6 +149,14 @@ export default {
},
watch: {
value(newVal) {
this.initData(newVal)
}
},
created() {
this.initData(this.value)
},
methods: {
initData(newVal) {
this.rightValues = newVal
this.leftDataSource = this.dataSource
@@ -160,9 +176,7 @@ export default {
} else {
this.leftDataSource = leftDataSource
}
}
},
methods: {
},
onSearchValueChange(value) {
if (this.searchCacheDS.length === 0) {
this.searchCacheDS = this.leftDataSource
@@ -37,22 +37,9 @@ export default {
return {
leftDataSource: [
{ id: 1, name: '小明', description: '小明牛P' },
{ id: 2, name: '小红', description: '小红牛P', disabled: true },
{ id: 3, name: '小蓝', description: '小蓝牛P', disabled: true },
{ id: 4, name: '小绿', description: '小绿牛P' },
{ id: 5, name: '小黄', description: '小黄牛P' },
{ id: 6, name: '小紫', description: '小紫牛P' },
{ id: 7, name: '小青', description: '小青牛P', disabled: true },
{ id: 8, name: '小橙', description: '小橙牛P' },
{ id: 9, name: '小贵', description: '小贵牛P' },
{ id: 10, name: '小陈', description: '小陈牛P' },
{ id: 11, name: '小勇', description: '小勇牛P' },
{ id: 12, name: '小田', description: '小田牛P' },
{ id: 13, name: '小天', description: '小天牛P', disabled: true },
{ id: 14, name: '小邓', description: '小邓牛P', disabled: true },
{ id: 15, name: '小周', description: '小周牛P', disabled: true },
{ id: 16, name: '小吴', description: '小吴牛P' },
{ id: 17, name: '小郑', description: '小郑牛P' },
{ id: 15, name: '小周', description: '小周牛P' },
{ id: 16, name: '小吴', description: '小吴牛P', disabled: true },
{ id: 18, name: '小王', description: '小王牛P' }
],
apiData: [