89 lines
2.6 KiB
Vue
89 lines
2.6 KiB
Vue
|
<template>
|
||
|
|
<vxe-table
|
||
|
|
ref="vxeTableRef"
|
||
|
|
:class="tabItem.key + '-vxe-table'"
|
||
|
|
:border="true"
|
||
|
|
size="small"
|
||
|
|
show-overflow="tooltip"
|
||
|
|
height="356"
|
||
|
|
:row-config="{ isHover: true }"
|
||
|
|
:edit-config="{ trigger: 'dblclick', mode: 'row', showIcon: false }"
|
||
|
|
:data="tableData"
|
||
|
|
:scroll-y="{ enabled: true }"
|
||
|
|
:checkbox-config="checkboxConfig || {}"
|
||
|
|
:row-class-name="rowClassName"
|
||
|
|
@checkbox-all="(obj) => emit('selection-change', obj)"
|
||
|
|
@checkbox-change="(obj) => emit('selection-change', obj)"
|
||
|
|
@cell-click="(obj) => emit('cell-click', obj)"
|
||
|
|
>
|
||
|
|
<vxe-column v-if="tabItem.edit" type="checkbox" width="50" align="center"></vxe-column>
|
||
|
|
<vxe-column type="seq" width="50" align="center"></vxe-column>
|
||
|
|
<vxe-column v-if="tabItem.edit" key="customDrag" field="customDrag" width="50" align="center">
|
||
|
|
<template #default="{ rowIndex }">
|
||
|
|
<el-dropdown
|
||
|
|
trigger="hover"
|
||
|
|
placement="bottom"
|
||
|
|
@command="(obj) => emit('dropdown-command', obj)"
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<Icon :size="20" icon="gg:menu-grid-r" />
|
||
|
|
</div>
|
||
|
|
<template #dropdown>
|
||
|
|
<el-dropdown-menu>
|
||
|
|
<el-dropdown-item :command="{ index: rowIndex, type: 'up' }" :disabled="rowIndex == 0"
|
||
|
|
>向上移</el-dropdown-item
|
||
|
|
>
|
||
|
|
<el-dropdown-item
|
||
|
|
:command="{ index: rowIndex, type: 'down' }"
|
||
|
|
:disabled="rowIndex == tableData.length - 1"
|
||
|
|
>向下移</el-dropdown-item
|
||
|
|
>
|
||
|
|
<el-dropdown-item :command="{ index: rowIndex, type: 'add' }"
|
||
|
|
>插入一行</el-dropdown-item
|
||
|
|
>
|
||
|
|
</el-dropdown-menu>
|
||
|
|
</template>
|
||
|
|
</el-dropdown>
|
||
|
|
</template>
|
||
|
|
</vxe-column>
|
||
|
|
<vxe-column v-for="(item, key) in column" :key="key" :field="key" v-bind="item"></vxe-column>
|
||
|
|
</vxe-table>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
defineOptions({ name: 'InfoVxeTable' })
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
tabItem: any
|
||
|
|
column: object
|
||
|
|
rowClassName?: string | Function
|
||
|
|
checkboxConfig?: object
|
||
|
|
}
|
||
|
|
const props = defineProps<Props>()
|
||
|
|
const tableData = defineModel<Array<any>>({ default: [] })
|
||
|
|
const emit = defineEmits(['selection-change', 'cell-click', 'dropdown-command'])
|
||
|
|
|
||
|
|
const vxeTableRef = ref()
|
||
|
|
|
||
|
|
defineExpose({ vxeTableRef })
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.view-vxe-table,
|
||
|
|
.exp-vxe-table {
|
||
|
|
::v-deep(.vxe-table--header) {
|
||
|
|
.vxe-header--column {
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.vxe-cell {
|
||
|
|
.vxe-cell-title-suffix-icon {
|
||
|
|
position: absolute;
|
||
|
|
top: 5px;
|
||
|
|
right: -2px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|