yos_web/src/components/category-select/CategorySelect.vue

<template>
  <div class="select">
    <span>{{label}} </span>
    <el-cascader :options="selectList" 
                 :show-all-levels="false"
                 :props="prop"
                 @change="changeSelect"
                 clearable
                 @clear="clearSelete()"
                 size="small">
    </el-cascader>
  </div>
</template>

<script>
import TreeSelect from '@riophae/vue-treeselect'
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
export default {
  name: 'CategorySelect',
  data() {
    return {

    };
  },
  props: {
    selectList: {
      default() {
        return []
      }
    },
    prop: {
      type:Object,
      default() {
        return {
          value:'sat_sharematerial_classid',
          label: 'classname',
        }
      }
    },
    label: String
  },
  components: {
    TreeSelect
  },
  computed:{
  },
  watch:{
  },
  created() {
    
  },
  methods: {
    changeSelect(id) {
      this.$emit('changeSelect',id)
    },
    clearSelete() {
      this.$emit('clearSelect')
    }
  },
};
</script>

<style scoped>
  .select .vue-treeselect {
    width: 150px;
    height: 100%;
  }
  .select {
    margin-right: 16px;
    display: flex;
    align-items: center;
    width: 290px;
  }
  .select span {
    margin-right: 8px;
    font-size: 14px;
  }
</style>