131 lines
3.7 KiB
Vue
131 lines
3.7 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">
|
|
<template #default="{ row }" v-if="key === 'hasChildren'">
|
|
<div :class="{ 'is-sub-field': row.isSubField }">
|
|
<el-button
|
|
v-if="!row.isSubField"
|
|
:type="item.editRender?.buttonType || 'primary'"
|
|
:size="item.editRender?.buttonSize || 'small'"
|
|
:disabled="item.editRender?.disabled ? item.editRender.disabled(row) : false"
|
|
@click.stop="handleButtonClick(item, row)"
|
|
>
|
|
{{ item.editRender?.buttonText || '添加子字段' }}
|
|
</el-button>
|
|
<span v-else>-</span>
|
|
</div>
|
|
</template>
|
|
</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()
|
|
|
|
// 处理按钮点击事件
|
|
const handleButtonClick = (item, row) => {
|
|
// 检查editRender是否存在
|
|
if (!item.editRender) {
|
|
return
|
|
}
|
|
|
|
// 检查events是否存在
|
|
if (!item.editRender.events) {
|
|
return
|
|
}
|
|
|
|
// 检查click事件是否存在
|
|
if (!item.editRender.events.click) {
|
|
return
|
|
}
|
|
|
|
// 执行自定义点击事件
|
|
item.editRender.events.click(row)
|
|
}
|
|
|
|
// 测试点击方法
|
|
const testClick = (row) => {
|
|
console.log('测试按钮被点击:', row)
|
|
alert('测试按钮工作正常!')
|
|
}
|
|
|
|
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>
|