multiselect.html 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <style>
  2. </style>
  3. <div id="{$name}">
  4. <input type="hidden" id="ele-{$name}" name="{$name}" :value="value.join(',')">
  5. <el-select
  6. v-model="value"
  7. multiple
  8. collapse-tags
  9. filterable
  10. size="small"
  11. style="width:100%"
  12. placeholder="请选择"
  13. >
  14. <el-option
  15. v-for="item in options"
  16. :key="item.id"
  17. :label="item.title"
  18. :value="item.id.toString()">
  19. </el-option>
  20. </el-select>
  21. </div>
  22. <script>
  23. new Vue({
  24. el: '#{$name}',
  25. data: function() {
  26. return {
  27. options: {:json_encode($lists)},
  28. value: {:json_encode($val)}
  29. }
  30. },
  31. watch: {
  32. value: function (newVal, oldVal) {
  33. $('#ele-{$name}').val(newVal.join(','));
  34. }
  35. },
  36. created(){
  37. const vals = this.value;
  38. this.value = [];
  39. vals.forEach((item) => {
  40. this.value.push(item.toString());
  41. })
  42. console.log('11111',this.value,this.options);
  43. }
  44. })
  45. </script>