<style> .el-select__tags-text { display: inline-block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .el-select .el-tag__close.el-icon-close { top: -7px; } </style> <div id="{$name}"> <input type="hidden" name="{$name}" v-model="value"> <input type="hidden" name="{$name1}" v-model="value1.join(',')"> <el-select clearable filterable v-model="value" placeholder="请选择分类"> <el-option v-for="item in options" :key="item.id" :label="item.title" :value="item.id.toString()"> </el-option> </el-select> </br> </br> <el-select clearable filterable v-model="value1" multiple collapse-tags placeholder="选择{$title}"> <el-option v-for="item in options1" :key="item.id" :label="item.title" :value="item.id.toString()"> </el-option> </el-select> </div> <script> new Vue({ el: '#{$name}', data: function() { return { options: {:json_encode($lists)}, value:'{$value}', options1:{:json_encode($options1)}, value1:{:json_encode($value1)}, } }, watch: { value: function (newVal, oldVal) { var that = this; if(!newVal){ newVal = '{$value}'; } console.log('{$value}') console.log(newVal) $.post('{$url}',{id:newVal},function (res) { that.options1 = res.data; that.value1 = []; }) $('input[name={$name}]').val(newVal); }, value1: function (newVal, oldVal) { $('input[name={$name1}]').val(newVal.join(',')); } } }) </script>