53 lines
1.2 KiB
Vue
53 lines
1.2 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"
|
|
>
|
|
<template #default="scope">
|
|
{{ column.format ? column.format(scope.row[column.field]) : scope.row[column.field] }}
|
|
</template>
|
|
</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>
|