feat(CuteTransfer): 添加组件禁用功能并优化数据初始化
- 添加 disabled 属性支持全局禁用左右移动按钮 - 实现 value 变化时的数据重新初始化功能 - 在组件创建时自动初始化数据状态 - 简化演示页面数据源配置,移除冗余测试数据 - 优化数据同步逻辑,确保值变更时正确更新显示
This commit is contained in:
@@ -44,7 +44,7 @@
|
|||||||
type="primary"
|
type="primary"
|
||||||
icon="el-icon-d-arrow-right"
|
icon="el-icon-d-arrow-right"
|
||||||
size="small"
|
size="small"
|
||||||
:disabled="leftSelection.length === 0"
|
:disabled="disabled || leftSelection.length === 0"
|
||||||
@click="onTransferRight"
|
@click="onTransferRight"
|
||||||
/>
|
/>
|
||||||
</el-row>
|
</el-row>
|
||||||
@@ -53,7 +53,7 @@
|
|||||||
type="primary"
|
type="primary"
|
||||||
icon="el-icon-d-arrow-left"
|
icon="el-icon-d-arrow-left"
|
||||||
size="small"
|
size="small"
|
||||||
:disabled="rightSelection.length === 0"
|
:disabled="disabled || rightSelection.length === 0"
|
||||||
@click="onTransferLeft"
|
@click="onTransferLeft"
|
||||||
/>
|
/>
|
||||||
</el-row>
|
</el-row>
|
||||||
@@ -125,6 +125,14 @@ export default {
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
required: false,
|
required: false,
|
||||||
default: false
|
default: false
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 是否禁用
|
||||||
|
*/
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -141,6 +149,14 @@ export default {
|
|||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
value(newVal) {
|
value(newVal) {
|
||||||
|
this.initData(newVal)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.initData(this.value)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initData(newVal) {
|
||||||
this.rightValues = newVal
|
this.rightValues = newVal
|
||||||
this.leftDataSource = this.dataSource
|
this.leftDataSource = this.dataSource
|
||||||
|
|
||||||
@@ -160,9 +176,7 @@ export default {
|
|||||||
} else {
|
} else {
|
||||||
this.leftDataSource = leftDataSource
|
this.leftDataSource = leftDataSource
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onSearchValueChange(value) {
|
onSearchValueChange(value) {
|
||||||
if (this.searchCacheDS.length === 0) {
|
if (this.searchCacheDS.length === 0) {
|
||||||
this.searchCacheDS = this.leftDataSource
|
this.searchCacheDS = this.leftDataSource
|
||||||
|
|||||||
@@ -37,22 +37,9 @@ export default {
|
|||||||
return {
|
return {
|
||||||
leftDataSource: [
|
leftDataSource: [
|
||||||
{ id: 1, name: '小明', description: '小明牛P' },
|
{ id: 1, name: '小明', description: '小明牛P' },
|
||||||
{ id: 2, name: '小红', description: '小红牛P', disabled: true },
|
|
||||||
{ id: 3, name: '小蓝', description: '小蓝牛P', disabled: true },
|
{ id: 3, name: '小蓝', description: '小蓝牛P', disabled: true },
|
||||||
{ id: 4, name: '小绿', description: '小绿牛P' },
|
{ id: 15, name: '小周', description: '小周牛P' },
|
||||||
{ id: 5, name: '小黄', description: '小黄牛P' },
|
{ id: 16, name: '小吴', description: '小吴牛P', disabled: true },
|
||||||
{ 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: 18, name: '小王', description: '小王牛P' }
|
{ id: 18, name: '小王', description: '小王牛P' }
|
||||||
],
|
],
|
||||||
apiData: [
|
apiData: [
|
||||||
|
|||||||
Reference in New Issue
Block a user