Subscribe on changes!

vue3 how to use extends

avatar
Apr 29th 2022

What problem does this feature solve?

Documentation description is relatively simple vue3#extends

I want to override a component and extend some of its methods。like this

I want to expend ElTale Add the function of exporting table data

export-table.vue

<script>
import { ElTable } from 'element-plus'
export default {
  extends: [ElTable],
  methods:{

    exportData(){}

  }
}
</script>

main.js

import ExportTable from '_c/tables/export-table'

app.component('exportTable', ExportTable)

page

<template>
  <export-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </export-table>
</template>

<script setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

But no form is rendered and no errors, have you ever played this way? vue2 it works,please help help .. __

What does the proposed API look like?

extends

avatar
Apr 29th 2022

extends: ElTable NOT extends: [ElTable]

avatar
Apr 29th 2022

extends: ElTable NOT extends: [ElTable] thks, My custom component is working,but use ElTable error I think I'm going to consult element-plus