0
0

multicascader.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <style>
  2. .el-select .el-input.is-focus .el-input__inner {
  3. border-color: #18a689;
  4. }
  5. .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
  6. color: #18a689;
  7. background-color: #fff;
  8. }
  9. .el-select-dropdown__item.selected {
  10. color: #18a689;
  11. font-weight: 700;
  12. }
  13. .el-select .el-input .el-select__caret {
  14. font-weight: bold;
  15. color: #555;
  16. }
  17. .el-input__inner {
  18. border-radius: 0px;
  19. }
  20. .el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner {
  21. border-color: #18a689;
  22. }
  23. </style>
  24. <div id="{$name}">
  25. <input type="hidden" name="{$name}" value="{:implode(',',$val)}">
  26. <el-tree
  27. :props="props"
  28. show-checkbox
  29. :data="options"
  30. node-key="id"
  31. :default-checked-keys="value"
  32. default-expand-all="true"
  33. @check-change="handleCheckChange">
  34. </el-tree>
  35. </div>
  36. <script>
  37. new Vue({
  38. el: '#{$name}',
  39. data: function() {
  40. return {
  41. props:{
  42. label: 'label',
  43. children: 'children'
  44. },
  45. options: {:json_encode($lists)},
  46. value: {:json_encode($val)},
  47. }
  48. },
  49. watch: {
  50. value: function (newVal, oldVal) {
  51. $('input[name={$name}]').val(newVal.join(','));
  52. }
  53. },
  54. methods: {
  55. handleCheckChange(data, checked, indeterminate) {
  56. if(checked){
  57. this.value.push(data.id);
  58. }else {
  59. this.value.forEach((item,index) =>{
  60. if(item===data.id){
  61. this.value.splice(index,1);
  62. }
  63. });
  64. }
  65. $('input[name={$name}]').val(this.value.join(','));
  66. console.log( this.value);
  67. },
  68. }
  69. })
  70. </script>