最近工作调整的原因,开始接触Vue+java B/S 软件开发,哎呀,小编一看B/S就是一个头两个大,所以做做笔记吧!
EIement参考网址:Element - 网站快速成型工具
1. Select 选择器
<1> 普通单选用法
//clearable 属性,则可将选择器清空。需要注意的是,clearable属性仅适用于单选。 //disabled 属性,则整个选择器选项不可选中。 //multiple 属性即可启用多选,此时v-model的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现,可以设置collapse-tags属性将它们合并为一段文字。 <template> <el-select v-model="value" clearable placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in arr" :key="item" :label="item" :value="item" :disabled="isOptionDisabled(item)"> </el-option> </el-select> </template> <script> export default { data() { return { options: [{ value: '选项1', label: '选项1' }, { value: '选项2', label: '选项2', disabled: true //此选项禁止选择 }, { value: '选项3', label: '选项3' }, { value: '选项4', label: '选项4' }, { value: '选项5', label: '选项5' }], arr:[], disabledOptions: ["5", "6", "11"] // 添加这一行,定义禁止的选项 } }, // created钩子是在组件创建完成后立即执行的,可以在此时进行一些初始化的操作。 created() { arr=["1","2"]; }, //mounted钩子函数是在DOM渲染完成后执行的 mounted() { this.arr = ["5", "6"]; this.arr.push("4"); } } </script>
<2> 多选、自定义、分组、搜索等.......