select3.html 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <style>
  2. .el-select__tags-text {
  3. display: inline-block;
  4. max-width: 170px;
  5. overflow: hidden;
  6. text-overflow: ellipsis;
  7. white-space: nowrap;
  8. }
  9. .el-select .el-tag__close.el-icon-close {
  10. top: -7px;
  11. }
  12. </style>
  13. <div id="{$name}">
  14. <input type="hidden" name="{$name}" v-model="value">
  15. <input type="hidden" name="{$name1}" v-model="value1.join(',')">
  16. <el-select clearable filterable v-model="value" placeholder="请选择分类">
  17. <el-option
  18. v-for="item in options"
  19. :key="item.id"
  20. :label="item.title"
  21. :value="item.id.toString()">
  22. </el-option>
  23. </el-select>
  24. </br>
  25. </br>
  26. <el-select
  27. clearable filterable
  28. v-model="value1"
  29. multiple
  30. collapse-tags
  31. placeholder="选择{$title}">
  32. <el-option
  33. v-for="item in options1"
  34. :key="item.id"
  35. :label="item.title"
  36. :value="item.id.toString()">
  37. </el-option>
  38. </el-select>
  39. </div>
  40. <script>
  41. new Vue({
  42. el: '#{$name}',
  43. data: function() {
  44. return {
  45. options: {:json_encode($lists)},
  46. value:'{$value}',
  47. options1:{:json_encode($options1)},
  48. value1:{:json_encode($value1)},
  49. }
  50. },
  51. watch: {
  52. value: function (newVal, oldVal) {
  53. var that = this;
  54. if(!newVal){
  55. newVal = '{$value}';
  56. }
  57. console.log('{$value}')
  58. console.log(newVal)
  59. $.post('{$url}',{id:newVal},function (res) {
  60. that.options1 = res.data;
  61. that.value1 = [];
  62. })
  63. $('input[name={$name}]').val(newVal);
  64. },
  65. value1: function (newVal, oldVal) {
  66. $('input[name={$name1}]').val(newVal.join(','));
  67. }
  68. }
  69. })
  70. </script>