最新的基于Vue3和Ts的Vue-Vben-Admin框架在哪里对表格做了不设置宽度则默认均分列宽的处理,具体代码在哪里?
时间: 2024-05-11 17:17:52 浏览: 106
可以在 Vue-Vben-Admin 的源码中的 `Table.vue` 组件中找到这个处理逻辑。
具体代码如下:
```vue
<template>
<a-table
v-bind="$attrs"
:columns="tableColumns"
:dataSource="tableData"
:scroll="scroll"
:pagination="false"
:loading="loading"
:rowKey="rowKey"
:rowSelection="rowSelection"
:size="size"
@change="handleChange"
>
<template v-for="({ prop, slotName }, index) in slotMap">
<template v-if="slotName==='default'">
<template #{{slotName}}="{text, record}">
<span v-if="tableColumns[index].ellipsis" class="ellipsis-text" v-popover="{content: text}">{{text}}</span>
<span v-else>{{text}}</span>
</template>
</template>
<template v-else>
<template :slot="slotName" slot-scope="{record}">
<slot :name="slotName" :record="record" />
</template>
</template>
</template>
<template #action="{ text, record }">
<component
:is="actionRender"
:text="text"
:record="record"
:actions="actions"
@reload="handleReload"
/>
</template>
</a-table>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { Table } from 'ant-design-vue'
import { TableColumn, TableDataItem } from './types'
export default defineComponent({
props: {
tableColumns: {
type: Array as PropType<TableColumn[]>,
default: () => []
},
tableData: {
type: Array as PropType<TableDataItem[]>,
default: () => []
},
scroll: {
type: Object as PropType<{ x?: number | true; y?: number }>
},
loading: {
type: Boolean,
default: false
},
rowKey: {
type: String,
default: 'id'
},
rowSelection: {
type: Object as PropType<{ [key: string]: any }>
},
size: {
type: String,
default: 'default'
},
actionRender: {
type: String,
default: 'ActionRender'
},
actions: {
type: Array as PropType<
{
text: string
callback: (row: TableDataItem) => void
}[]
>,
default: () => []
}
},
computed: {
slotMap() {
return this.tableColumns.reduce((acc, col) => {
const { prop, slotName } = col
if (slotName) {
acc.push({ prop, slotName })
}
return acc
}, [] as { prop: string; slotName: string }[])
}
},
methods: {
handleChange(pagination: any) {
this.$emit('change', pagination)
},
handleReload() {
this.$emit('reload')
}
}
})
</script>
```
在这里,我们可以看到 `a-table` 标签中的 `:scroll` 属性接受一个对象,其中 `x` 属性可以设置表格的宽度,如果 `x` 属性的值为 `true`,则表示表格的宽度自适应父元素。因此,如果不设置 `x` 属性,那么表格的列宽就会自动均分。
阅读全文