|
@ -6,7 +6,7 @@ |
|
|
:checkbox-config="{ labelField: 'seq', highlight: true }" @checkbox-all="selectAllChangeEvent" |
|
|
:checkbox-config="{ labelField: 'seq', highlight: true }" @checkbox-all="selectAllChangeEvent" |
|
|
@checkbox-change="selectChange" ref="tableRef" border :column-config="{ resizable: true }"> |
|
|
@checkbox-change="selectChange" ref="tableRef" border :column-config="{ resizable: true }"> |
|
|
<vxe-column type="seq" width="70"></vxe-column> |
|
|
<vxe-column type="seq" width="70"></vxe-column> |
|
|
<vxe-column type="checkbox" width="70" fixed="left"></vxe-column> |
|
|
<vxe-column type="checkbox" width="60"></vxe-column> |
|
|
<vxe-column :field="headerItem.prop" :title="headerItem.label" |
|
|
<vxe-column :field="headerItem.prop" :title="headerItem.label" |
|
|
:min-width="`${headerItem.label.length * 23 + 24}`" v-for="(headerItem, headerIndex) in tableHeader" |
|
|
:min-width="`${headerItem.label.length * 23 + 24}`" v-for="(headerItem, headerIndex) in tableHeader" |
|
|
:key="headerIndex" :sortable="headerItem.isSort"> |
|
|
:key="headerIndex" :sortable="headerItem.isSort"> |
|
@ -15,17 +15,19 @@ |
|
|
<span>{{ row[headerItem.prop] }}</span> |
|
|
<span>{{ row[headerItem.prop] }}</span> |
|
|
</template> |
|
|
</template> |
|
|
<template v-else-if="headerItem.type === 'date'"> |
|
|
<template v-else-if="headerItem.type === 'date'"> |
|
|
<span>{{ row[headerItem.prop] }}</span> |
|
|
<span>{{ dayjs(row[headerItem.prop]).format("YYYY-MM-DD HH:mm:ss") }}</span> |
|
|
</template> |
|
|
</template> |
|
|
<template v-else-if="headerItem.type === 'photo'"> |
|
|
<template v-else-if="headerItem.type === 'photo'"> |
|
|
<el-image style="width: 100px; height: 100px" :src="row[headerItem.prop]" :zoom-rate="1.2" |
|
|
<span v-if="row[headerItem.prop]"> |
|
|
:max-scale="7" :min-scale="0.2" :preview-src-list="[row[headerItem.prop]]" :initial-index="4" |
|
|
<el-image style="width: 45px" :src="row[headerItem.prop]" :zoom-rate="1.2" :max-scale="7" |
|
|
fit="cover" /> |
|
|
:min-scale="0.2" :preview-src-list="[row[headerItem.prop]]" :initial-index="4" fit="cover" /> |
|
|
{{ row[headerItem.prop] }}</template> |
|
|
</span> |
|
|
|
|
|
<span v-else>无</span> |
|
|
|
|
|
</template> |
|
|
<template v-else>{{ row[headerItem.prop] }}</template> |
|
|
<template v-else>{{ row[headerItem.prop] }}</template> |
|
|
</template> |
|
|
</template> |
|
|
</vxe-column> |
|
|
</vxe-column> |
|
|
<vxe-column fixed="right" title="操作" width="145"> |
|
|
<vxe-column title="操作" width="145"> |
|
|
<template #default="{ row }"> |
|
|
<template #default="{ row }"> |
|
|
<el-button type="primary" circle @click="optClick(row, 'edit')"> |
|
|
<el-button type="primary" circle @click="optClick(row, 'edit')"> |
|
|
<el-icon> |
|
|
<el-icon> |
|
@ -80,6 +82,12 @@ export default { |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
|
|
|
clearSelection() { |
|
|
|
|
|
const $table = this.$refs.tableRef |
|
|
|
|
|
if ($table) { |
|
|
|
|
|
$table.clearCheckboxRow() |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
selectChange({ checked }) { |
|
|
selectChange({ checked }) { |
|
|
let $table = this.$refs.tableRef |
|
|
let $table = this.$refs.tableRef |
|
|
if ($table) { |
|
|
if ($table) { |
|
|