The core part of the vue code is:
Set the custom value showAble for the el-input-number control’s disable and then write the logic. When this item is checked, this content will is added to multipleTableRef
Then showAble executes the code to determine whether the incoming e is in multipleTableRef. If it is, it means that the item is checked, then return falseactivate control
<script setup>
...
import {<!-- --> onMounted, ref, computed } from 'vue'
import {<!-- -->
Location,
OfficeBuilding,
Tickets,
User,
House
} from '@element-plus/icons-vue'
import {<!-- --> getBusinessAreaService } from '@/api/outlet'
import {<!-- --> getMenuService } from '@/api/menu'
const route = useRoute()
const userStore = useUserStore()
const size = ref('')
const iconStyle = computed(() => {<!-- -->
const marginMap = {<!-- -->
large: '8px',
default: '6px',
small: '4px'
}
return {<!-- -->
marginRight: marginMap[size.value] || marginMap.default
}
})
// Construct request parameters
const data = ref({<!-- -->})
data.value = {<!-- -->
orderBusinessArea: Number(route.query.id),
orderMenu: [],
orderPerson: userStore.userInfo.id,
isCancel: true,
outLet: '',
Area: ''
}
//Set the business area and business point of the display area
const getOutLetInfo = async () => {<!-- -->
const res = await getBusinessAreaService(route.query)
data.value.outLet = res.data.results[0].outlet
data.value.Area = res.data.results[0].area
}
// Code related to the dish display area
const tableData = ref([])
const getMenuInfo = async () => {<!-- -->
const resMenu = await getMenuService()
tableData.value = resMenu.data.results
}
const multipleSelection = ref([])
const multipleTableRef = ref()
const handleSelectionChange = (val) => {<!-- -->
multipleSelection.value = val
}
// Shopping cart pre-selection
const handleChange = (e) => {<!-- -->
const findItem = multipleSelection.value.find((item) => item.id === e.row.id)
if (findItem) {<!-- -->
if (e.$event > 0) {<!-- -->
const item = data.value.orderMenu.find((item) => item.menu_id == e.row.id)
if (item) {<!-- -->
item.menu_number = e.$event
} else {<!-- -->
data.value.orderMenu.push({<!-- -->
menu_id: e.row.id,
menu_number: e.$event
})
}
}
if (e.$event <= 0) {<!-- -->
const item = data.value.orderMenu.find((item) => item.menu_id == e.row.id)
if (item) {<!-- -->
data.value.orderMenu.splice(findItem, 1)
}
}
}
}
//You can also set variables directly
// const showAble = (e) => {<!-- -->
// const findItem = multipleSelection.value.find((item) => item.id === e)
// if (findItem) {<!-- -->
// return false
// } else {<!-- -->
// return true
// }
// }
//You can also use calculated properties
const showAble = computed(() => {<!-- -->
return (e) => {<!-- -->
const findItem = multipleSelection.value.find((item) => item.id === e)
if (findItem) {<!-- -->
return false
} else {<!-- -->
return true
}
}
})
onMounted(getOutLetInfo(), getMenuInfo())
</script>
<template>
<el-descriptions
class="margin-top"
title="Menu order"
:column="4"
:size="size"
border
>
<template #extra> </template>
<el-descriptions-item>
<template #label>
<div class="cell-item">
<el-icon :style="iconStyle">
<user />
</el-icon>
The person who placed the order
</div>
</template>
{<!-- -->{<!-- --> userStore.userInfo.username }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item">
<el-icon :style="iconStyle">
<House />
</el-icon>
Sales points
</div>
</template>
{<!-- -->{<!-- --> data.outLet }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item">
<el-icon :style="iconStyle">
<location />
</el-icon>
Business area
</div>
</template>
{<!-- -->{<!-- --> data.Area }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item">
<el-icon :style="iconStyle">
<tickets />
</el-icon>
confirm
</div>
</template>
<el-tag
size="large"
:type="data.isCancel ? 'success' : 'danger'"
@click="data.isCancel = !data.isCancel"
>{<!-- -->{<!-- --> data.isCancel }}</el-tag
>
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item">
<el-icon :style="iconStyle">
<office-building />
</el-icon>
Remark
</div>
</template>
{<!-- -->{<!-- --> data }}
</el-descriptions-item>
</el-descriptions>
<!-- Dish display area -->
<div class="el-table">
<el-table
ref="multipleTableRef"
:data="tableData"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column label="Dish name" width="120">
<template #default="scope">{<!-- -->{<!-- --> scope.row.menuName }}</template>
</el-table-column>
<el-table-column property="menuPrice" label="Price" width="120" />
<el-table-column label="quantity" width="170">
<template #default="{ row, $index }">
<el-input-number
:model-value="0"
:disabled="showAble(row.id)"
class="mx-4"
:key="$index"
@change="handleChange({ row, $index, $event, $slots })"
/>
</template>
</el-table-column>
<el-table-column label="image" width="150">
<template #default="scope">
<el-popover :width="180" placement="right" trigger="click">
<template #reference>
<el-image :src="scope.row.menuPicture" width="50px" />
</template>
<template #default>
<div style="display: flex; gap: 16px; flex-direction: column">
<el-image
:size="60"
:src="scope.row.menuPicture"
style="margin-bottom: 8px"
/>
</div>
</template>
</el-popover>
</template>
</el-table-column>
</el-table>
</div>
</template>