详解vue+nodejs获取多个表数据的方法

第详解vue+nodejs获取多个表数据的方法el-table:data="state.tableData"border

el-table-columnprop="name"label="Name"width="180"/

el-table-columnprop="relation"label="Relation"width="180"/el-table-column

el-table-columnprop="path"label="Path"

template#default="scope"

divv-for="(item,index)inscope.row.path":key="index"

:src="'http://localhost:3000//'+item.path"

/div

/template

/el-table-column

el-table-columnlabel="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-dialogv-model="state.dialogVisible"width="80%"

el-transfer

v-model="state.rightValue"

filterable

:titles="['Source','Target']"

:button-texts="['Toleft','Toright']"

:format="{

noChecked:'${total}',

hasChecked:'${checked}/${total}',

:data="state.data"

template#default="{option}"

span{{option.key}}-{{option.label}}/span

/template

/el-transfer

el-button

type="primary"

size="medium"

@click.prevent="commit"

/el-button

/el-dialog

/div

/template

scriptlang="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';

exportdefaultdefineComponent({

name:'relation',

components:{

Edit,ElMessage,ElDialog

setup(){

conststate=reactive({

tableData:[],

dialogVisible:false,

data:[],

rightValue:[],

editdata:{}

constinit=function(){

relationlist().then((res)={

if(res.code===200){

res.list.forEach((ele)={

if(ele.relation){

ele.relation=ele.relation.split(',')

for(leti=0;iele.relation.length;i++){

ele.relation[i]=Number(ele.relation[i]);

state.tableData=res.list

constinit1=function(){

uploadorder().then(res={

if(res.code===200){

letdata=[]

res.list.forEach(ele={

data.push({

key:ele.id,

label:

state.data=data

constedit=function(row){

state.editdata=row;

state.dialogVisible=true;

state.rightValue=row.relation||[];

constcommit=function(){

letdata={

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)={

constresult=awaitdb.select(`SELECT*FROMuser`)

for(leti=0;iresult.length;i++){

letele=result[i];

letuploadres=awaitdb.select(`SELECTpathFROMuploadwhereidin(${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

constresult=awaitdb.update('user',{relation:rightvalue},`WHEREid=