vue 级联选择器

如何使用Element_UI 组件中的

Cascader 级联组件，使用起来很简单，

但是有的项目不会引用Element_UI，而是使用 Vuetify，是没有级联组件的，我今天记录一下，我实现的方法。

 

 点击此输入框，会弹出级联信息，可以选择，也可以自己搜索

<v-row>
          <div
            style="position: absolute;
            width: 100%;
            height: 72px;
            z-index: 1;"
            @click.stop="pickerVisible=true"
          />
          <v-text-field
            v-model="editForm.schoolName"
            readonly
            :rules="schoolNameRules"
            :counter="20"
            label="学校"
            required
            prepend-icon="mdi-home"
          />
</v-row>

 

<v-bottom-sheet v-model="pickerVisible">
      <v-card>
        <v-sheet class="pa-4 primary lighten-2">
          <v-text-field
            v-model="search"
            label="请输入"
            dark
            flat
            solo-inverted
            hide-details
            clearable
            clear-icon="mdi-close-circle-outline"
          />
        </v-sheet>
        <v-card-text style="overflow: auto;max-height: 80vh;">
          <v-treeview
            :items="departmentTree"
            :search="search"
            :filter="filter"
            item-key="value"
            item-text="label"
            activatable
            color="warning"
            open-all
            @update:active="onUpdate"
          ></v-treeview>
        </v-card-text>
      </v-card>
    </v-bottom-sheet>

<script>
import { wechatLogin, saveSchool } from "@/api/user";
import { getSchoolTree } from "@/api/interfaces/ip";
export default {
  data() {
    return {
      editDialog: false,
      loading: null,
      departmentTree: [],
      editForm: {
        username: "",
        categoryId: "",
        password: "",
        password2: "",
        telephone: "",
        categoryName: "",
      },
      schoolNameRules: [(v) => !!v || "请选择学校"],
      rules: {
        categoryId: [
          {
            required: true,
            message: "请选择学校",
            trigger: "change",
          },
        ],
      },
      pickerVisible: false,
      search: null,
      overlay: true,
    };
  },
  computed: {
    filter() {
      return this.caseSensitive
        ? (item, search, textKey) => item[textKey].indexOf(search) > -1
        : undefined;
    },
  },
  created() {
    this.overlay = true;
    const code = this.$route.query.code;
    const formData = new FormData();
    formData.append("code", code);
    wechatLogin(formData).then((response) => {
      const data = response.data;
      this.$store
        .dispatch("user/wechatLogin_phone", data.token)
        .then(() => {
          // this.$router.push({ path: this.redirect || '/' })
          if (data.noCategory == "noCategory") {
            getSchoolTree().then((response) => {
              this.departmentTree = response.data;
              this.editDialog = true;
            });
          } else {
            window.opener.location.reload();
            window.close();
          }
        })
        .catch((error) => {});
    });
  },
  methods: {
    saveSchools() {
      if (this.$refs.editForm.validate()) {
        this.overlay = true;
        saveSchool(this.editForm.categoryId)
          .then((response) => {
            //loading.close();
            //window.opener.location.reload();
            //window.close();
            this.overlay = false;
            this.$router.push({ path: this.redirect || "/home" });
          })
          .catch(() => {
            this.overlay = false;
          });
      } else {
        console.log("error submit!!");
        return false;
      }
    },
    onUpdate(result) {
      const id = result[0];
      this.$set(
        this.editForm,
        "schoolName",
        this.getDepartmentName(id, this.departmentTree)
      );
      this.$set(this.editForm, "categoryId", id);
      this.pickerVisible = false;
    },
    getDepartmentName(id, departmentTree) {
      for (let i = 0; i < departmentTree.length; i++) {
        if (departmentTree[i].value == id) {
          return departmentTree[i].label;
        }
        if (departmentTree[i].children) {
          const name = this.getDepartmentName(id, departmentTree[i].children);
          if (name) {
            return name;
          }
        }
      }
      return null;
    },
  },
};
</script>

<style scoped>
.login-container {
  background: url(~@/assets/images/login-bg.jpg) no-repeat;
  height: 100%;
  background-size: 100%;
  display: flex;
  padding: 0;
  align-items: center;
}
.v-form {
  flex: auto;
  padding: 12px;
  background: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.7),
    rgb(255 255 255 / 0)
  );
}
.form-container >>> .row.justify-center {
  padding-top: 20px;
}
.select {
  position: relative;
}
</style>