vue3 extends的使用

此处使用extends继承element-plus中的elCascader组件，并改写options里的数据

<template>
  <el-cascader
    v-bind="{ ...$props, ...$attrs }"
    :options="state.options"
  ></el-cascader>
</template>
<script>
import { ElCascader } from 'element-plus'
import { defineComponent, reactive, watch } from 'vue'

export default defineComponent({
  extends: ElCascader,
  setup(props, { emit }) {
    const state = reactive({
      options: [],
    })

    const mapArr = arr => {
      return arr.map(item => ({
        ...item,
        [props.props.label]: item[props.props.label] + 'test',
        [props.props.value]: item[props.props.value],
        [props.props.children || 'children']: item[
          props.props.children || 'children'
        ]?.length
          ? mapArr(item[props.children || 'children'])
          : [],
      }))
    }

    watch(
      () => props.options,
      val => {
        state.options = mapArr(val)
        console.log(state.options)
        console.log(props, val)
      },
      {
        deep: true,
        immediate: true,
      }
    )

    return {
      state,
    }
  },
})
</script>

<style scoped></style>