路由——商品管理

安装npm install element-plusmain.js配置import ElementPlus from element-plusapp.use(ElementPlustemplate el-table :datagoodsList border stylewidth: 100% el-table-column typeindex label编号 / el-table-column propgoods_name label商品名称 / el-table-column propgoods_price label商品价格 / el-table-column label标签 !-- 修改1使用 #defaultscope 代替 v-slot{ row }更稳定 -- template #defaultscope !-- 修改2增加 v-ifscope 判断避免解构 undefined -- div v-ifscope classflex gap-2 items-center !-- 修改3从 scope.row 获取当前行数据 -- el-tag v-for(tag, idx) in scope.row.tags :keyidx closable disable-transitions close() handleClose(scope.row, tag) {{ tag }} /el-tag el-input v-ifscope.row.inputVisible v-modelscope.row.inputValue sizesmall classw-20 keyup.enter() handleInputConfirm(scope.row) blur() handleInputConfirm(scope.row) / el-button v-else classbutton-new-tag sizesmall click() showInput(scope.row) Tag /el-button /div !-- 数据未加载时显示空白 -- div v-else加载中.../div /template /el-table-column el-table-column label操作 template #defaultscope el-button typedanger plain clickonRemove(scope.row.id) 删除 /el-button /template /el-table-column /el-table /template script setup import { ref, nextTick } from vue const goodsList ref([ { id: 1, goods_name: 夏季专柜同款女鞋, goods_price: 298, tags: [舒适, 透气], inputVisible: false, inputValue: }, { id: 2, goods_name: 冬季保暖女士休闲雪地靴 舒适加绒防水短靴 防滑棉鞋, goods_price: 89, tags: [保暖, 防滑], inputVisible: false, inputValue: }, { id: 3, goods_name: 秋冬新款女士毛衣 套头宽松针织衫 简约上衣, goods_price: 199, tags: [秋冬, 毛衣], inputVisible: false, inputValue: }, { id: 4, goods_name: 2023春秋装新款大码女装 衬衫 上衣, goods_price: 19, tags: [雪纺衫, 打底], inputVisible: false, inputValue: }, { id: 5, goods_name: 长款长袖圆领女士毛衣 2022秋装新款假两件连衣裙, goods_price: 178, tags: [圆领, 连衣裙], inputVisible: false, inputValue: } ]) const handleClose (row, tag) { const idx row.tags.indexOf(tag) if (idx 0) row.tags.splice(idx, 1) } const showInput async (row) { row.inputVisible true await nextTick() // 聚焦输入框改进选择器 const input document.querySelector(.el-input__inner:focus) input?.focus() } const handleInputConfirm (row) { if (row.inputValue.trim()) { row.tags.push(row.inputValue.trim()) } row.inputValue row.inputVisible false } const onRemove (id) { goodsList.value goodsList.value.filter(item item.id ! id) } /script style scoped .flex { display: flex; } .gap-2 { gap: 8px; } .items-center { align-items: center; } .w-20 { width: 80px; } .button-new-tag { height: 24px; line-height: 24px; padding: 0 8px; } /style