71 lines
2.4 KiB
Vue
71 lines
2.4 KiB
Vue
<!--
|
|
* @Author: micky 1254597151@qq.com
|
|
* @Date: 2023-09-16 16:26:07
|
|
* @LastEditors: micky 1254597151@qq.com
|
|
* @LastEditTime: 2023-09-18 16:48:12
|
|
* @FilePath: \housekeeping-admin\src\components\good-select\table-detail.vue
|
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
-->
|
|
<template>
|
|
<div class="mt-5" v-if="selectData.length">
|
|
<el-table ref="tableDataRef" :data="selectData" height="200">
|
|
<el-table-column label="服务名称" width="240">
|
|
<template #default="scope">
|
|
<div class="flex items-center">
|
|
<div class="w-[60px] h-[60px]">
|
|
<el-image
|
|
style="width: 60px; height: 60px"
|
|
:src="scope.row.image"
|
|
:fit="'cover'"
|
|
/>
|
|
</div>
|
|
|
|
<el-tooltip :content="scope.row.name" placement="top">
|
|
<div class="ml-2 truncate">{{ scope.row.name }}</div>
|
|
</el-tooltip>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column property="category" label="服务分类" width="200" />
|
|
<el-table-column label="操作" width="120" fixed="right">
|
|
<template #default="scope">
|
|
<div class="flex">
|
|
<el-button type="primary" link @click="handleDeleteItem(scope.$index)"
|
|
:disabled="disabled">移除</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
modelValue: any
|
|
disabled: boolean
|
|
}>(),
|
|
{
|
|
modelValue: [],
|
|
disabled: false
|
|
}
|
|
)
|
|
const emit = defineEmits(['update:modelValue'])
|
|
const selectData: any = computed(() => {
|
|
return props.modelValue || []
|
|
})
|
|
const handleDeleteItem = (index: number) => {
|
|
selectData.value.splice(index, 1)
|
|
emit('update:modelValue', selectData.value)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.move {
|
|
@media screen and (max-width: 1536px) {
|
|
@apply overflow-scroll;
|
|
}
|
|
}
|
|
</style> |