SgSelector.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <template>
  2. <el-select v-model="selected" :placeholder="placeholder" :filterable="canFilter">
  3. <el-option v-for="item in ops" :key="item.value" :label="item.name" :value="item.value">
  4. </el-option>
  5. </el-select>
  6. </template>
  7. <script>
  8. export default {
  9. name: "sg-selector",
  10. props: ['default', 'type', 'placeholder', 'param', 'filterable', 'hasAll'],
  11. data() {
  12. let defaultV = "";
  13. if (this.default) {
  14. defaultV = this.default;
  15. }
  16. return {
  17. loaded: false,
  18. canFilter: this.filterable ? true : false,
  19. selected: defaultV,
  20. ops: []
  21. }
  22. },
  23. methods: {
  24. init() {
  25. let vm = this;
  26. vm.ops = [];
  27. if (vm.hasAll) {
  28. vm.ops.push({name: "全部", value: 'all'});
  29. }
  30. vm.postJson("/server/common/component/selector", { type: vm.type, param: vm.param }, (resp) => {
  31. if (vm.selected === '' && resp.selectedValue) {
  32. vm.selected = resp.selectedValue;
  33. }
  34. if(resp.options){
  35. resp.options.forEach((item)=>{
  36. vm.ops.push(item);
  37. });
  38. }
  39. if(vm.selected === '' && vm.ops[0]){
  40. vm.selected = vm.ops[0].value;
  41. }
  42. });
  43. }
  44. },
  45. created: function() {
  46. this.init();
  47. if (this.defautl === undefined) {
  48. return false;
  49. }
  50. this.$emit("changed", this.default);
  51. },
  52. watch: {
  53. selected: function(n, o) {
  54. if (!n || n === undefined) {
  55. return false;
  56. }
  57. if (n && o && n === o) {
  58. return false;
  59. }
  60. this.$emit("changed", n);
  61. },
  62. param: function(n, o) {
  63. if (n && o && n === o) {
  64. return false;
  65. }
  66. this.selected = "";
  67. this.init();
  68. }
  69. }
  70. }
  71. </script>