vue3 how to use extends
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