詳解vue+nodejs獲取多個表數據的方法
讀取兩個表的數據
將用戶及圖像聯系在一起
效果
前端實現
修改關聯的時候,前端向後端傳入array[number],後端存為字符串
這時在前端獲取數據時,需要循環處理為數字數組
<template> <div> <el-table :data="state.tableData" border style="width: 100%"> <el-table-column prop="name" label="Name" width="180" /> <el-table-column prop="relation" label="Relation" width="180" ></el-table-column> <el-table-column prop="path" label="Path"> <template #default="scope"> <div v-for="(item, index) in scope.row.path" :key="index" style="display:inline-block"> <img :src="'http://localhost:3000//'%20+%20item.path" style="width: 100px;height:100px;margin:0 10px" /> </div> </template> </el-table-column> <el-table-column label="Operations" width="120"> <template #default="scope"> <el-button type="text" size="small" @click.prevent="edit(scope.row)" > <el-icon> <edit /> </el-icon> </el-button> </template> </el-table-column> </el-table> <el-dialog v-model="state.dialogVisible" width="80%"> <el-transfer v-model="state.rightValue" style="text-align: left; display: inline-block" filterable :titles="['Source', 'Target']" :button-texts="['To left', 'To right']" :format="{ noChecked: '${total}', hasChecked: '${checked}/${total}', }" :data="state.data" > <template #default="{ option }"> <span>{{ option.key }} - {{ option.label }}</span> </template> </el-transfer> <p> <el-button type="primary" size="medium" @click.prevent="commit" >提交 </el-button> </p> </el-dialog> </div> </template> <script lang="ts"> import {defineComponent, reactive} from 'vue' import {relationlist,uploadorder,editrelation} from '../utils/api' import { ElMessage, ElDialog } from 'element-plus'; import { Edit } from '@element-plus/icons'; export default defineComponent({ name : 'relation', components:{ Edit, ElMessage, ElDialog }, setup() { const state = reactive({ tableData:[], dialogVisible:false, data:[], rightValue:[], editdata:{} }) const init = function(){ relationlist().then((res)=>{ if (res.code === 200) { res.list.forEach((ele)=>{ if(ele.relation){ ele.relation = ele.relation.split(',') for (let i = 0; i < ele.relation.length; i++) { ele.relation[i] = Number(ele.relation[i]); } } }) state.tableData = res.list } }) } const init1 = function(){ uploadorder().then(res => { if (res.code === 200) { let data = [] res.list.forEach(ele => { data.push({ key:ele.id, label:ele.name }) }); state.data = data } }) } const edit = function(row){ state.editdata = row; state.dialogVisible = true; state.rightValue = row.relation||[]; } const commit = function(){ let data = { rightvalue:state.rightValue, ...state.editdata } editrelation(data).then((res)=>{ if(res.code === 200){ ElMessage.success(res.msg) state.dialogVisible = false init() }else{ ElMessage.error(res.msg) } }) } init() init1() return { state, edit, commit } } }) </script>
後端實現
//獲取關聯列表 router.get('/relationlist',async (req,res,next)=>{ const result = await db.select(`SELECT * FROM user`) for (let i = 0; i < result.length; i++) { let ele = result[i]; let uploadres = await db.select(`SELECT path FROM upload where id in (${ele.relation})`) ele.path = uploadres } res.send(Success(result)); }) //修改關聯列表 router.post('/editrelation',async (req,res,next)=>{ let {id,rightvalue} = req['body'] console.log(rightvalue); if(!id || !rightvalue){ res.send(MError('請選擇後再提交')) return } const result = await db.update('user', { relation:rightvalue}, ` WHERE id = ${id}`); if(result){ res.send(Success(result)) return }else{ res.send(MError('修改失敗,請再次嘗試')) return } })
總結
本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!
推薦閱讀:
- vue 中使用 vxe-table 制作可編輯表格的使用過程
- el-table嵌套el-popover處理卡頓的解決
- elementUi 中table表尾插入行的實例
- 關於el-table表格組件中插槽scope.row的使用方式
- vue實現表格分頁功能