Vue + ElementUi 实现input树型下拉框

时间:2024-11-24 07:03:45
  • <script>
  • export default {
  • data() {
  • return {
  • data: [{
  • label: '一级 1',
  • children: [{
  • label: '二级 1-1',
  • children: [{
  • label: '三级 1-1-1',
  • children:[]
  • }]
  • }]
  • }, {
  • label: '一级 2',
  • children: [{
  • label: '二级 2-1',
  • children: [{
  • label: '三级 2-1-1',
  • children:[]
  • }]
  • }, {
  • label: '二级 2-2',
  • children: [{
  • label: '三级 2-2-1',
  • children:[]
  • }]
  • }]
  • }, {
  • label: '一级 3',
  • children: [{
  • label: '二级 3-1',
  • children: [{
  • label: '三级 3-1-1',
  • children:[]
  • }]
  • }, {
  • label: '二级 3-2',
  • children: [{
  • label: '三级 3-2-1',
  • children:[]
  • }]
  • }]
  • }],
  • isShowSelect:false,
  • form:{input1:''}
  • };
  • },
  • watch: {
  • form: {
  • handler(form){
  • if(this.isShowSelect){
  • this.$refs.selectTree.filter(form.input1);
  • }
  • },
  • deep: true,//深度监听,重要
  • },
  • },
  • methods: {
  • selectClassfy(data) {
  • this.form.input1=data.label;
  • this.isShowSelect=false;
  • },
  • changeSelectTree(){
  • this.isShowSelect=true;
  • },
  • hideParentClick(e) {
  • var isOther = e.relatedTarget == null || e.relatedTarget.closest("-tree")
  • == null || e.relatedTarget.closest("-tree").id != "floatTree";
  • if (isOther) {
  • this.isShowSelect = false;
  • } else {
  • e.target.focus();
  • }
  • },
  • // 选择器的树节点
  • filterNode(value, data) {
  • if (!value) return true;
  • return data.label.indexOf(value) !== -1;
  • },
  • }
  • };
  • </script>