uni-data-select怎么禁用
时间: 2024-10-12 10:02:43 浏览: 58
uni-app实现select标签功能
uni-data-select组件在UniApp中用于数据选择,如果需要禁用某个选项,可以设置每个option的disabled属性。在Option的配置项里添加`{ disabled: true }`即可使其不可选。例如:
```html
<uni-data-select v-model="selectedValue" :data-list="optionsList">
<view slot="item" slot-scope="{ item }">
<text>{{ item.label }}</text>
<switch v-if="item.disabled" :value="item.disabled" @change="handleDisabledChange(item)"></switch>
</view>
</uni-data-select>
<script>
export default {
data() {
return {
selectedValue: '',
optionsList: [
{ value: '1', label: '启用', disabled: false },
{ value: '2', label: '禁用', disabled: true },
],
};
},
methods: {
handleDisabledChange(option) {
option.disabled = !option.disabled; // 根据开关切换option的disabled状态
},
},
};
</script>
```
在这个例子中,第二个选项会被默认禁用,点击开关可以切换其是否禁用。
阅读全文