0
0

user-group-select.html 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <style>
  2. .el-select-group__wrap:not(:last-of-type)::after {
  3. content: '';
  4. position: absolute;
  5. display: none;
  6. left: 20px;
  7. right: 20px;
  8. bottom: 0px !important;
  9. height: 0px !important;
  10. background: #e4e7ed;
  11. }
  12. .el-select-group__wrap:not(:last-of-type){
  13. padding-bottom: 0px !important;
  14. }
  15. </style>
  16. <div id="{$name}">
  17. {if $multi==0} <!--多选-->
  18. <input type="hidden" name="{$name}" :value="value">
  19. <el-select v-model="value" filterable multiple clearable placeholder="请选择" size="small"
  20. style="width:100%">
  21. <el-option-group
  22. v-for="group in options"
  23. :key="group.id"
  24. :label="group.name">
  25. <el-option
  26. v-for="item in group.user"
  27. :key="item.id"
  28. :label="item.real_name"
  29. :value="item.id.toString()">
  30. </el-option>
  31. </el-option-group>
  32. </el-select>
  33. {if $msg}
  34. <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> {$msg}</span>
  35. {/if}
  36. </div>
  37. {else}<!--单选-->
  38. <input type="hidden" name="{$name}" :value="value">
  39. <el-select v-model="value" filterable clearable placeholder="请选择" size="small"
  40. style="width:100%">
  41. <el-option-group
  42. v-for="group in options"
  43. :key="group.id"
  44. :label="group.name">
  45. <el-option
  46. v-for="item in group.user"
  47. :key="item.id"
  48. :label="item.real_name"
  49. :value="item.id.toString()">
  50. </el-option>
  51. </el-option-group>
  52. </el-select>
  53. {if $msg}
  54. <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> {$msg}</span>
  55. {/if}
  56. </div>
  57. {/if}
  58. <script>
  59. new Vue({
  60. el: '#{$name}',
  61. data: function() {
  62. return {
  63. options: {:json_encode($lists)},
  64. value: '{$val}',
  65. }
  66. },
  67. watch: {
  68. value: function (newVal, oldVal) {
  69. if("{$multi}"==="0"){
  70. $('input[name={$name}]').val(newVal.join(','));
  71. }else {
  72. $('input[name={$name}]').val(newVal);
  73. }
  74. }
  75. },
  76. created(){
  77. const vals = this.value;
  78. if("{$multi}"==="0"){
  79. this.value = [];
  80. if(vals){
  81. this.value = vals.split(',');
  82. }
  83. }
  84. }
  85. })
  86. </script>