123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- <style>
- .el-select .el-input.is-focus .el-input__inner {
- border-color: #18a689;
- }
- .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
- color: #18a689;
- background-color: #fff;
- }
- .el-select-dropdown__item.selected {
- color: #18a689;
- font-weight: 700;
- }
- .el-select .el-input .el-select__caret {
- font-weight: bold;
- color: #555;
- }
- .el-input__inner {
- border-radius: 0px;
- }
- .el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner {
- border-color: #18a689;
- }
- </style>
- <div id="{$name}">
- <input type="hidden" name="{$name}" value="{:implode(',',$val)}">
- <el-tree
- :props="props"
- show-checkbox
- :data="options"
- node-key="id"
- :default-checked-keys="value"
- default-expand-all="true"
- @check-change="handleCheckChange">
- </el-tree>
- </div>
- <script>
- new Vue({
- el: '#{$name}',
- data: function() {
- return {
- props:{
- label: 'label',
- children: 'children'
- },
- options: {:json_encode($lists)},
- value: {:json_encode($val)},
- }
- },
- watch: {
- value: function (newVal, oldVal) {
- $('input[name={$name}]').val(newVal.join(','));
- }
- },
- methods: {
- handleCheckChange(data, checked, indeterminate) {
- if(checked){
- this.value.push(data.id);
- }else {
- this.value.forEach((item,index) =>{
- if(item===data.id){
- this.value.splice(index,1);
- }
- });
- }
- $('input[name={$name}]').val(this.value.join(','));
- console.log( this.value);
- },
- }
- })
- </script>
|