0

I am new to vue3, in vue 2 version the "element-ui" uses the "option API" on "ElTree" component so that I can able to extend the 'ElTree' in my custom component and access 'ElTree' props like 'root, dragState'. But now the 'element-plus' library uses the "composition API" so I couldn't able to extend the "ElTree" and access the props 'root, dragState'.

What should I do now? Can I able to extend the "ElTree" component or do I have to use the 'ElTree' component directly from the 'element-plus'?

SandyKrish
  • 222
  • 1
  • 11

1 Answers1

0

Yes.

You can imagine that I want to extend the el-table to create a new component named XTable and use its props.data

//XTable.vue
<template>
    <el-table
      v-bind="$attrs"
      :data="formatedData"
    >
      <template v-for="(_, slot) in $slots" v-slot:[slot]="scope">
        <slot :name="slot" v-bind="scope || {}" />
      </template>
    </el-table>
  </template>
  
  <script lang="ts" setup>
  import { ElTable } from "element-plus";
  
  const props = defineProps({
    data: { type: Array<any>, required: true },
  });
  
  const formatedData = computed(()=>{
    return data.map(...)
  })
  </script>
  • Extend component's props: use v-bind="$attrs" to pass all attributes from <xtable> to <el-table>.
  • Extend component's slots: use <template v-for... to fallthrough slots.
  • Use their props: define same prop name data for XTable，and pass a formatted one to el-table.Since $attrs object (in Vue3) includes all attributes that not declared by the component's prop or emits options(e.g., class, style, etc), you should manually define in XTable and pass it to el-table
zhenyong
  • 249
  • 3
  • 10