mz-cloud/ruoyi-ui/src/components/QueryThisLevel/index.vue

<template>
  <div class="switch">
    <i class="el-icon-search"><span>仅查询本级</span></i>
    <el-switch v-model="isThisLevel" :active-value="activeValue" :inactive-value="inactiveValue" active-color="#13ce66"
      inactive-color="#ff4949" @change="changeLevel">
    </el-switch>
  </div>
</template>
<script>
export default {
  name: "QueryThisLevel",
  props: {
    initLevel: {
      require: true,
    },
    active: {
      default: true,
    },
    inactive: {
      default: false,
    },
  },
  data() {
    return {
      isThisLevel: parseInt(this.initLevel),
      activeValue: this.active,
      inactiveValue: this.inactive,
    }
  },
  methods: {
    changeLevel(value) {
      this.$emit('changeLevel', value);
    }
  },
}
</script>
<style ref="stylesheet/scss" lang="scss" scoped>
.switch {
  display: flex;
  align-items: center;
  margin: 10px;
  justify-content: space-between;
}
</style>