vue3 + element-plus + ts el-table封装
在Vue 3和Element Plus中使用TypeScript封装一个自定义的el-table
组件,可以通过props接收外部传递的数据,并使用el-table
组件来展示这些数据。以下是一个简单的封装示例:
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column
v-for="(column, index) in columns"
:key="index"
:prop="column.prop"
:label="column.label"
></el-table-column>
</el-table>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';
export default defineComponent({
name: 'CustomTable',
components: {
ElTable,
ElTableColumn
},
props: {
columns: {
type: Array,
required: true
},
tableData: {
type: Array,
required: true
}
}
});
</script>
使用该组件时,你需要传递columns
和tableData
两个props:
<template>
<CustomTable :columns="tableColumns" :tableData="tableData" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import CustomTable from './components/CustomTable.vue';
export default defineComponent({
components: {
CustomTable
},
setup() {
const tableColumns = ref([
{ label: 'Date', prop: 'date' },
{ label: 'Name', prop: 'name' },
{ label: 'Address', prop: 'address' }
]);
const tableData = ref([
{ date: '2016-05-02', name: 'John', address: 'No. 189, Grove St, Los Angeles' },
// ... more data
]);
return {
tableColumns,
tableData
};
}
});
</script>
在这个例子中,tableColumns
定义了表格列的信息,tableData
则是表格要展示的数据。这样,你就可以通过CustomTable
组件来展示表格,并且可以方便地通过props进行配置和数据传递。
评论已关闭