| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 |
- <!-- -->
- <template>
- <div>
- <el-select class="mySelect" :style="{'width':selectWidth+'vw'}" size="mini" v-model="orgLists" multiple collapse-tags placeholder="全部督查机构" @change="selectOrg()">
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- ></el-option>
- </el-select>
- </div>
- </template>
- <script>
- //这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
- //例如:import 《组件名称》 from '《组件路径》';
- export default {
- //import引入的组件需要注入到对象中才能使用
- components: {},
- data() {
- //这里存放数据
- return {
- // selectWidth:13,
- options: [
- {
- value: "020",
- label: "长委"
- },
- {
- value: "021",
- label: "黄委"
- },
- {
- value: "022",
- label: "淮委"
- },
- {
- value: "023",
- label: "海委"
- },
- {
- value: "024",
- label: "珠江委"
- },
- {
- value: "025",
- label: "松辽委"
- },
- {
- value: "026",
- label: "太湖局"
- },
- ],
- orgLists: []
- };
- },
- //监听属性 类似于data概念
- computed: {
- selectWidth(){
- if(innerWidth <= 960){
- return 15;
- }else{
- return 12;
- }
- }
- },
- //监控data中的数据变化
- watch: {},
- //方法集合
- methods: {
- selectOrg(){
- this.$emit('OrgLists',this.orgLists);
- }
- },
- //生命周期 - 创建完成(可以访问当前this实例)
- created() {
- },
- //生命周期 - 挂载完成(可以访问DOM元素)
- mounted() {
-
- },
- beforeCreate() {}, //生命周期 - 创建之前
- beforeMount() {}, //生命周期 - 挂载之前
- beforeUpdate() {}, //生命周期 - 更新之前
- updated() {}, //生命周期 - 更新之后
- beforeDestroy() {}, //生命周期 - 销毁之前
- destroyed() {}, //生命周期 - 销毁完成
- activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
- }
- </script>
- <style type="text/css">
- /* 浅色input */
-
- </style>
|