数据是多级菜单，并且可以多选事件

1、数据是多级菜单，并且可以多选事件

1、首先页面中template标签中：

<el-form-item class="width360">
    <!-- categories -->
    <span slot="label">
        <span class="span-box">
            <span class="tip">*</span>
            <span>图书分类:</span>
        </span>
    </span>
    <el-popover popper-class="category-popover" placement="bottom-start" trigger="click" :disabled="vueStatus">
        <el-tree
            :data="categoriesList" ref="categoriesTree"
            show-checkbox
            node-key="id"
            :default-checked-keys="checkedCategoriesKeys"
            :props="defaultProps"
            @check="setSelectCategories"
            :disabled="vueStatus"
        >
        </el-tree>
        <el-select v-model="categoriesCode" value-key="ctId" multiple @remove-tag="setCategoriesTree" popper-class="hidden-selection" slot="reference" placeholder="请选择" :disabled="vueStatus">

            <el-option v-for="item in categoriesOptions" :key="item.ctId" :label="item.name" :value="item"></el-option>
        </el-select>
        <span class="tip" v-if="typeCategoriesShow">请选择图书分类</span>
    </el-popover>
</el-form-item>

2、渲染数据并添加事件：

<script>

    import {  getDetailAPI } from '@/api/newBook/letterNotice.js';
    import { getCategoriesListAPI, getDiyTypeListAPI } from '@/api/newBook/common';
    import { getMultipleSelectionIDs } from '@/filters/getIds'
    import { stitchData } from '@/utils/format'

    export default {
        data() {
          return {
            imgForm: {},
            checkedCategoriesKeys:[],
            categoriesCode:[],
            categoriesList:[],
            categoriesOptions: [],
            typeCategoriesShow: false,
            defaultProps: {
              children: 'list',
              label: 'name'
            },
            id:this.$route.query.lookId||this.$route.query.editId,
          }
        },

        created() {
    
            if (this.$route.fullPath.indexOf('editId') >= 0) {
                this.$route.meta.title = '编辑印装通知单';
                this.vueStatus = false;
            } else if (this.$route.fullPath.indexOf('lookId') >= 0) {
                this.$route.meta.title = '查看印装通知单';
                this.vueStatus = true;
            }
        
            this.getCategoriesList();
            this.getDetail();
        },
        mounted(){
            this.getCategoriesList();
            this.getDetail();
        },
        methods: {
            // 新书--图书分类
            getCategoriesList(){
                getCategoriesListAPI().then((res) => {
                    if(res.data.code == 0){
                        this.categoriesList = res.data.data
                        let listArr = []
                        let item = res.data.data;
                        this.diGuiTree(item);
                        res.data.data.map(item => {
                            listArr = listArr.concat(item).concat(item.list)
                        })
                        this.categoriesOptions = listArr.map(item => {
                            let obj = {
                                ctId:item.id,
                                name:item.name,
                                code:item.code,
                                parentId:item.parentId,
                            }
                            return obj
                        })
                    }
                })
            },
            diGuiTree(item) {  //递归便利树结构
                item.forEach(item => {
                  item.list && item.list.length !=0 ?　　　　　　　　
                    this.diGuiTree(item.list) : delete item.list
                })
            },
            //图书类型 -- 图书分类 -- 清除分类
            clearCheckedKeys(){
                this.$refs.searchTree.setCheckedKeys([])
            },
            //图书分类：改变Tree选中节点时修改select
            setSelectCategories(data, obj){
                this.categories = obj.checkedNodes.map(node => {
                  return {ctId: node.id, code: node.code, name: node.name}
                })
                this.categoriesCode = this.categories.map(item => item.name)
            },
            // 图书分类：删除多选标签设置Tree的选中节点
            setCategoriesTree(tag){
                if (this.categoriesCode.length>0) {
                  const checkedCategoriesKeys = getMultipleSelectionIDs(this.categoriesCode,'ctId')
                  this.$refs.categoriesTree.setCheckedKeys(checkedCategoriesKeys)
                } else {
                  this.$refs.categoriesTree.setCheckedKeys([])
                }
            },

            /*保存*/
            dataSubmit() {
                this.$refs['ruleForm'].validate((valid) => {
                  if (valid) {
                    let printNum = Number(this.imgForm.printNum)
                    let modelBookNum = Number(this.imgForm.modelBookNum)
                    if(printNum < modelBookNum){
                      this.$message.error('印数必须大于等于样书！')
                      return
                    }else{
        
                      //新书--图书分类
                      let cateArr = []
                      this.categoriesCode.map((item) => {
                        cateArr.push(item)
                      })
                      this.imgForm.categories = cateArr.join(',');
                      if(!this.imgForm.categories){
                        this.typeCategoriesShow = true
                      }
        
                      this.imgForm.list = this.listData
                      this.imgForm.id = this.id
                      saveAPI(this.imgForm).then(res => {
                        if (res.data.status) {
                          this.$message.success('保存成功');
                          this.$router.push('/newBook/letterNotice');
                        }else{
                          this.$message.error(res.data.msg);
                        }
                      })
                    }
                  }
                })
            },
  
            /*详情*/
            getDetail(){
                getDetailAPI(this.id).then(res=>{
                  if(res.data.code == 0){
                    this.imgForm = res.data.data;
        
                    //新书--图书分类
                    let cateArr = []
                    if(this.imgForm.categories){
                      let codeArr2 = this.imgForm.categories.split(',');
                      codeArr2.map((cell) => {
                        this.categoriesOptions.map((item) => {
                          if(item.name == cell){
                            cateArr.push({code:item.code,ctId:item.ctId,name:item.name})
                          }
                        })
                      })
                      this.categoriesCode = cateArr;
                      this.checkedCategoriesKeys = getMultipleSelectionIDs(cateArr,'ctId')
                    }
                    
                    this.$refs.ruleForm.resetFields();
                  }
                })
            },
        }
    }
</script>