三级联动弹窗

<el-dialog title="选择类目" :show-close="false" :visible.sync="dialogVisibles" width="600px" center>
      <ul class="levelNav">
        <li>一级类目</li>
        <li>二级类目</li>
        <li>三级类目</li>
      </ul>
      <div class="num-box">
        <ul class="top">
          <li
            v-for="(item,index) in topLevel"
            :key="index"
            @click="showItem(1,item.id)"
            class="topL"
            :class="item.isCheck ?'active':''"
          >
            <div>{{item.name}}</div>
            <div v-if="item.children" class="el-icon-arrow-right"></div>
          </li>
        </ul>
        <ul class="center">
          <li
            class="topL"
            :class="item.isCheck ?'active':''"
            v-for="(item,index) in twoLevel"
            :key="index"
            @click="showItem(2,item.id)"
          >
            <div>{{item.name}}</div>
            <div v-if="item.children" class="el-icon-arrow-right"></div>
          </li>
        </ul>
        <ul class="last">
          <li
            class="lasts"
            :class="item.isCheck ?'active':''"
            v-for="(item,index) in threeLevel"
            :key="index"
            @click="showItem(3,item.id)"
          >{{item.name}}</li>
        </ul>
      </div>
      <div class="add-dialog-item btnlist">
        <el-button class="submit" @click="confirm">确认</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>

data(){
	return{
		topLevel: [
        {
          name: "货车",
          id: 1,
          isCheck: false,
          children: [
            {
              name: "货车二级",
              id: 1,
              isCheck: false,
              children: [
                {
                  name: "货车三级",
                  id: 1,
                  isCheck: false,
                },
              ],
            },
          ],
        },
        {
          name: "客车",
          id: 2,
          isCheck: false,
        },
        {
          name: "挂车",
          id: 3,
          isCheck: false,
          children: [
            {
              name: "挂车二级",
              id: 3,
              isCheck: false,
              children: [
                {
                  name: "挂车三级",
                  id: 3,
                  isCheck: false,
                },
              ],
            },
          ],
        },
      ],
      twoLevel: [],
      threeLevel: [],
	}
}
 showItem(key, params) {
      if (key == 1) {
        this.twoLevel = [];
        this.threeLevel = [];
        this.topLevel.forEach((item) => {
          item.isCheck = false;
          if (params == item.id) {
            this.selectName = item.name;
            item.isCheck = true;
            if (item.children) {
              item.children.forEach((items) => {
                items.isCheck = false;
              });
              this.twoLevel = item.children;
            }
          }
        });
      }
      if (key == 2) {
        this.twoLevel.forEach((item) => {
          item.isCheck = false;
          if (params == item.id) {
            this.selectName = this.selectName + ">" + item.name;
            item.isCheck = true;
            if (item.children) {
              item.children.forEach((items) => {
                items.isCheck = false;
              });
              this.threeLevel = item.children;
            }
          }
        });
      }
      if (key == 3) {
        this.threeLevel.forEach((item) => {
          item.isCheck = false;
          if (params == item.id) {
            this.selectName = this.selectName + ">" + item.name;
            item.isCheck = true;
          }
        });
      }
    },