elementui的穿梭框设置为不可点击
时间: 2023-05-24 22:01:16 浏览: 680
可以通过设置属性 disabled 或者 readonly 来将 elementui 的穿梭框设置为不可点击。不同于 disabled,readonly 只是使输入框只读,不会阻止用户点击其它部分。如果要设置不可拖动,可以设置属性 sortable 为 false。
相关问题
elementui穿梭框
ElementUI的穿梭框(Transfer)组件是一个可以让用户在两个列表之间移动数据的交互式组件。它可以用于例如选择多个选项、分类等场景。
以下是一个基本的使用示例:
```html
<el-transfer
v-model="selectedData"
:data="data"
:titles="['Source', 'Target']"
:filterable="true"
:props="{key: 'name', label: 'name'}">
</el-transfer>
```
其中,`v-model`绑定的是已经选中的数据,`data`是可供选择的数据列表,`titles`是两个列表的标题,`filterable`表示是否可以使用搜索功能,`props`用于指定数据列表中每个项的键名和显示文本的键名。
你可以根据需要进一步自定义该组件的样式和行为。
elementui穿梭框动态数据
要实现elementui穿梭框动态数据,你需要使用v-model绑定穿梭框的值,以及使用props属性传递数据源的数组。具体步骤如下:
1. 在组件中定义穿梭框的数据源数组,以及绑定v-model的value数组:
```
<el-transfer
v-model="value"
:data="data"
></el-transfer>
<script>
export default {
data() {
return {
value: [],
data: []
};
}
}
</script>
```
2. 使用props属性传递数据源的数组:
```
<template>
<el-transfer
v-model="value"
:data="data"
></el-transfer>
</template>
<script>
export default {
props: {
sourceData: {
type: Array,
required: true
}
},
data() {
return {
value: [],
data: []
};
},
mounted() {
// 将传递进来的数组设置为data数组
this.data = this.sourceData;
}
}
</script>
```
以上就是使用elementui穿梭框动态数据的基本步骤。