element-plus 表格單選 · 編程知識

``` <template> <el-dialog class="ba-operate-dialog care-dialog" :close-on-click-modal="true" width="98%" @open="openCareFun" v-model="state.dialog" style="overflow: hidden; overflow-y: scroll;" > <template #header> <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'"> 選擇貨品 </div> </template> <view class="goods-box" > <el-row :gutter="20"> <el-col :span="6" > <el-card class="box-card" > <div class="tree-box"> <el-tree :data="cateTree" :props="defaultProps" :highlight-current="true" @node-click="handleNodeClick" default-expand-all="true" node-key="id" :default-checked-keys="[0]" :current-node-key="0" /> </div> </el-card> </el-col> <el-col :span="18" > <el-card class="box-card" > <view class="search-box"> <el-form :model="form" @keyup.enter="onSearchSubmit" > <el-row :gutter="20" > <el-col :span="12" :offset="4"> <el-form-item label="名稱">  <el-input v-model="form.kw" placeholder="貨號、名稱、簡碼"/> </el-form-item> </el-col>  <el-col :span="4"> <el-form-item> <el-button type="primary" @click="onSearchSubmit">查詢</el-button> </el-form-item> </el-col> </el-row> </el-form> </view>  <div class="goods-table"> <el-table :data="tableData" v-loading="loading" height="300" style="width: 100%" stripe ref="tableDataRef" @select="handlerPTempSelect" @selection-change="handlePTempSelectionChange" @row-click="rowClickHandlePtemp" > <el-table-column type="selection" width="55" /> <el-table-column prop="goods_no" label="商品編號" width="110" fixed="left"/> <el-table-column label="圖片" width="80"> <template #default="scope"> <el-image v-if="scope.row.template.template_images[0]" style="width: 50px; height: 50px;border-radius: 4px;" :src="scope.row.template.template_images[0]" :fit="scope.row.template.template_name" /> </template> </el-table-column> <el-table-column prop="template.template_name" label="商品名稱" width="100" /> <el-table-column prop="color_name" label="顏色" width="100" /> <el-table-column prop="template.template_no" label="商品簡碼" width="100"/> <el-table-column prop="brand_name" label="品牌" width="100"/> <el-table-column prop="unit_price" label="吊牌價" width="100"/> </el-table> <div class="goods-pagination-block"> <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]" :disabled="disabled" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </div> </div> <view> <el-row :gutter="20" style="margin-top:80px;"> <el-col :span="6" :offset="6" align="center"> <el-button type="primary" @click="handleConfirm">確定</el-button> </el-col> <el-col :span="6" align="center"> <el-button type="danger" @click="handleCancel" >返回</el-button> </el-col> </el-row> </view> </el-card> </el-col> </el-row> </view> </el-dialog> </template> <script setup lang="ts"> import { reactive, ref, inject,defineExpose,watch,defineEmits,onMounted } from 'vue' import { ElNotification } from 'element-plus' import { useI18n } from 'vue-i18n' import {getGoodsList} from "/@/api/backend/aGoods"; const emit = defineEmits([ "doSth" ]); let props = defineProps({ cateTree:{ type:Object, }, kw:{ type:String, } }) onMounted(() => { }); let state = reactive({ dialog:false, }) // 打開 const openCareFun = ()=>{ tableDataRef.value.clearSelection()// 清空選中 form.kw = props.kw // 默認查詢 searchGoods() } const openDialogFun = ()=>{ state.dialog = true } // 選擇數據 const tempData = reactive({ selectCheckList:[], // 選擇的貨品 goodsCateId:0, // 選中分類ID }) interface Tree { label: string children?: Tree[] } const defaultProps = { children: 'children', label: 'label', } const handleNodeClick = (data: Tree) => { console.log(data) tempData.goodsCateId = data.id searchGoods() } const form = reactive({ kw: props.kw || '', sn:"", // 按條形碼查詢 }) let tableData = ref([]) // 表格數據 const currentPage = ref(1) const pageSize = ref(10) const total = ref(0) const disabled = ref(true) const loading = ref(false) watch(() => tableData, (newValue, oldValue) => { console.log('watch-item',{ newValue:newValue, oldValue:oldValue, }) disabled.value = tableData.value.length>0?false:true; }, {deep:true}) const onSearchSubmit = () => { searchGoods() } const searchGoods = () => { loading.value = true let search = [] if(tempData.goodsCateId >0){ search = [ { field:'template.category_id', operator:'FIND_IN_SET', val:tempData.goodsCateId, } ] } let param = { search, quick_search:form.kw, limit:pageSize.value, page:currentPage.value, } getGoodsList(param).then(res => { console.log(res.data) tableData.value = res.data.list total.value = res.data.total loading.value = false }); } // 頁碼 const handleSizeChange = (val: number) => { console.log(`${val} items per page`) pageSize.value = val searchGoods() } const handleCurrentChange = (val: number) => { console.log(`current page: ${val}`) currentPage.value = val searchGoods() } const tableDataRef = ref() // 表格某一行的單擊事件 function rowClickHandlePtemp(row) { const selectData = tempData.selectCheckList tableDataRef.value.clearSelection() if (selectData.length >= 1) { const [item] = selectData; const shouldSelect = item !== row; tableDataRef.value.toggleRowSelection(row, shouldSelect); } else { tableDataRef.value.toggleRowSelection(row, true); } } // 當用戶手動勾選數據行的 Checkbox 時觸發的事件 function handlerPTempSelect(selection, row) { tableDataRef.value.clearSelection() // 清除所有勾選項 if(selection.length == 0) return tableDataRef.value.toggleRowSelection(row,true) } // 當選擇項發生變化時會觸發該事件 function handlePTempSelectionChange(val) { if(val.length > 1){ return } tempData.selectCheckList = val } // 確定 const handleConfirm = ()=>{ // 判斷商品是否選擇 if(tempData.selectCheckList.length == 0){ ElNotification({ title: '提示', message: '請選擇一個貨品！', type: 'warning', }) return false } if(tempData.selectCheckList.length > 1){ ElNotification({ title: '提示', message: '只能選擇一個貨品！', type: 'warning', }) return false } state.dialog = false emit('doSth',{ goods:tempData.selectCheckList, fun:'doSth' }); } const handleCancel = ()=>{ state.dialog = false } defineExpose({openDialogFun}) </script> <style scoped lang="scss"> .goods-table ::v-deep .el-table th.el-table__cell:nth-child(1) .cell { visibility: hidden; } .ftw{ font-weight: 900; } .o-wrap{ overflow-wrap: break-word; } .tree-box{ overflow: auto; height: 50vh; } .goods-pagination-block{ margin-top: 18px; } </style> ```