46 lines
1.0 KiB
Vue
46 lines
1.0 KiB
Vue
|
<template>
|
||
|
|
<d-table :data="dataSource" @sort-change="handleSortChange" :header-bg="true">
|
||
|
|
<d-column v-for="(column, index) in props.tableConfig" :field="column.field"
|
||
|
|
:header="column.header" :sortable="column.sortable" :sort-method="column.sortMethod"></d-column>
|
||
|
|
</d-table>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { defineComponent, ref, onMounted } from 'vue';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
props: {
|
||
|
|
tableConfig: {
|
||
|
|
type: Array,
|
||
|
|
default: () => [],
|
||
|
|
},
|
||
|
|
dataSource: {
|
||
|
|
type: Array,
|
||
|
|
default: () => [],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
setup(props) {
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
console.log('props', props);
|
||
|
|
});
|
||
|
|
|
||
|
|
const handleSortChange = ({ field, direction }) => {
|
||
|
|
console.log('field', field);
|
||
|
|
console.log('direction', direction);
|
||
|
|
};
|
||
|
|
const sortDateMethod = (a, b) => {
|
||
|
|
return a.date > b.date;
|
||
|
|
};
|
||
|
|
const sortNameMethod = (a, b) => {
|
||
|
|
return a.lastName > b.lastName;
|
||
|
|
};
|
||
|
|
|
||
|
|
return { props, handleSortChange, sortDateMethod, sortNameMethod };
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
|
||
|
|
</style>
|