e8923f3f2d824816de9ba657b47598405b1021ba.svn-base 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <!-- -->
  2. <template>
  3. <div>
  4. <el-select class="mySelect" :style="{'width':selectWidth+'vw'}" size="mini" v-model="orgLists" multiple collapse-tags placeholder="全部督查机构" @change="selectOrg()">
  5. <el-option
  6. v-for="item in options"
  7. :key="item.value"
  8. :label="item.label"
  9. :value="item.value"
  10. ></el-option>
  11. </el-select>
  12. </div>
  13. </template>
  14. <script>
  15. //这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
  16. //例如:import 《组件名称》 from '《组件路径》';
  17. export default {
  18. //import引入的组件需要注入到对象中才能使用
  19. components: {},
  20. data() {
  21. //这里存放数据
  22. return {
  23. // selectWidth:13,
  24. options: [
  25. {
  26. value: "020",
  27. label: "长委"
  28. },
  29. {
  30. value: "021",
  31. label: "黄委"
  32. },
  33. {
  34. value: "022",
  35. label: "淮委"
  36. },
  37. {
  38. value: "023",
  39. label: "海委"
  40. },
  41. {
  42. value: "024",
  43. label: "珠江委"
  44. },
  45. {
  46. value: "025",
  47. label: "松辽委"
  48. },
  49. {
  50. value: "026",
  51. label: "太湖局"
  52. },
  53. ],
  54. orgLists: []
  55. };
  56. },
  57. //监听属性 类似于data概念
  58. computed: {
  59. selectWidth(){
  60. if(innerWidth <= 960){
  61. return 15;
  62. }else{
  63. return 12;
  64. }
  65. }
  66. },
  67. //监控data中的数据变化
  68. watch: {},
  69. //方法集合
  70. methods: {
  71. selectOrg(){
  72. this.$emit('OrgLists',this.orgLists);
  73. }
  74. },
  75. //生命周期 - 创建完成(可以访问当前this实例)
  76. created() {
  77. },
  78. //生命周期 - 挂载完成(可以访问DOM元素)
  79. mounted() {
  80. },
  81. beforeCreate() {}, //生命周期 - 创建之前
  82. beforeMount() {}, //生命周期 - 挂载之前
  83. beforeUpdate() {}, //生命周期 - 更新之前
  84. updated() {}, //生命周期 - 更新之后
  85. beforeDestroy() {}, //生命周期 - 销毁之前
  86. destroyed() {}, //生命周期 - 销毁完成
  87. activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
  88. }
  89. </script>
  90. <style type="text/css">
  91. /* 浅色input */
  92. </style>