vue前端双向绑定问题，需求解决
我需要在这里点击选择之后，
需要在这个框中显示我所选择的信息应该怎么办
点击表格内容后，拿到所选择行的内容，然后this去赋值表单的内容。
<template>
<v-container
:id="id"
fluid
tag="section"
>
<v-card>
<v-app-bar
color="white"
elevate-on-scroll
scroll-target="#scrolling-table"
>
<v-toolbar-title>生产交接</v-toolbar-title>
<v-divider
class="mx-4"
inset
vertical
/>
<v-text-field
v-model="fuzzySearch"
label="搜索"
single-line
hide-details
/>
<v-spacer />
<!-- 新增弹窗 -->
<v-dialog
scrollable
max-width="1400"
>
<template v-slot:activator="{ on, attrs }">
<v-btn
icon
v-bind="attrs"
v-on="on"
@click="formData={};attachList=[]"
>
<v-icon>mdi-plus-circle-outline</v-icon>
</v-btn>
</template>
<template v-slot:default="dialog">
<v-card>
<v-app-bar
color="primary"
dark
>
新增
</v-app-bar>
<v-card-text>
<v-form ref="addform">
<v-row>
<v-col cols="12">
<v-btn @click="importBill">
引用单据
</v-btn>
</v-col>
<v-col
cols="12"
md="4"
>
<v-text-field
v-model="formData.mission_name"
label="派工名称"
single-line
hide-details
disabled
/>
</v-col>
<v-col
cols="12"
md="4"
>
<v-text-field
v-model="formData.info_num"
label="报工数量"
single-line
hide-details
disabled
/>
</v-col>
<v-col
cols="12"
md="4"
>
<v-text-field
v-model="formData.info_qualified_num"
label="合格数量"
single-line
hide-details
disabled
/>
</v-col>
<v-col
cols="12"
md="4"
>
<v-text-field
v-model="formData.info_unqualified_num"
label="不合格数量"
single-line
hide-details
disabled
/>
</v-col>
<v-col
cols="12"
md="4"
>
<v-text-field
v-model="formData.info_num"
label="生产数量"
single-line
hide-details
/>
</v-col>
</v-row>
</v-form>
</v-card-text>
<v-card-actions class="justify-end">
<v-btn
text
@click="add(dialog)"
>
提交
</v-btn>
<v-btn
text
@click="dialog.value = false"
>
关闭
</v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
<!-- 引用弹窗 -->
<!-- 引用弹窗 -->
<v-dialog
v-model="importDialog"
scrollable
max-width="1400"
>
<template v-slot:default="dialog">
<v-card>
<v-app-bar
color="primary"
dark
>
引用单据
</v-app-bar>
<v-card-text>
<v-row>
<v-col cols="12">
<v-data-table
id="scrolling-table"
:headers="billHeader"
:items="billList"
:loading="isBillLoading"
loading-text="加载数据中"
class="overflow-y:auto"
hide-default-footer
:options.sync="billOption"
>
<template v-slot:item.actions="{ item }">
<v-btn @click="checkBill(item)">
选择
</v-btn>
</template>
</v-data-table>
</v-col>
</v-row>
</v-card-text>
<v-card-actions class="justify-end">
<v-btn
text
@click="dialog.value = false"
>
关闭
</v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
<!-- 筛选弹窗 -->
<v-dialog
scrollable
max-width="600"
>
<template v-slot:activator="{ on, attrs }">
<v-btn
icon
v-bind="attrs"
v-on="on"
>
<v-icon>mdi-magnify</v-icon>
</v-btn>
</template>
<template v-slot:default="dialog">
<v-card>
<v-app-bar
color="primary"
dark
>
筛选
</v-app-bar>
<v-card-text>
<v-row>
<v-col
cols="12"
md="auto"
>
<v-text-field
v-model="params.like_company_name"
label="发起单位"
single-line
hide-details
/>
</v-col>
<v-col
cols="12"
md="auto"
>
<v-text-field
v-model="params.like_org_name"
label="发起部门"
single-line
hide-details
/>
</v-col>
<v-col
cols="12"
md="auto"
>
<v-text-field
v-model="params.like_user_name"
label="发起人"
single-line
hide-details
/>
</v-col>
</v-row>
</v-card-text>
<v-card-actions class="justify-end">
<v-btn
text
@click="search(function(){dialog.value = false})"
>
搜索
</v-btn>
<v-btn
text
@click="dialog.value = false"
>
关闭
</v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
</v-app-bar>
<!-- 详情弹窗 -->
<v-dialog
v-model="editDialog"
scrollable
max-width="600"
>
<template v-slot:default="dialog">
<v-card>
<v-app-bar
color="primary"
dark
>
报工
</v-app-bar>
<v-card-text>
<v-form ref="addform">
<v-row>
<v-col cols="12">
<v-text-field
v-model="formData.procedure_code"
label="派工编码"
single-line
hide-details
disabled
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="formData.procedure_name"
label="派工名称"
single-line
hide-details
disabled
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="formData.process_name"
label="工序名称"
single-line
hide-details
disabled
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="formData.procedure_num"
label="可生产数量"
single-line
hide-details
disabled
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="formData.procedure_runnable_num"
label="可报工数量"
single-line
hide-details
disabled
/>
</v-col>
<v-col
cols="12"
md="auto"
>
<v-text-field
v-model="params.info_num"
label="总数量"
single-line
hide-details
/>
</v-col>
<v-col
cols="12"
md="auto"
>
<v-text-field
v-model="params.info_qualified_num"
label="合格数量"
single-line
hide-details
/>
</v-col>
<v-col
cols="12"
md="auto"
>
<v-text-field
v-model="params.info_nuqualified_num"
label="合格数量"
single-line
hide-details
/>
</v-col>
</v-row>
</v-form>
</v-card-text>
<v-card-actions class="justify-end">
<v-btn
text
@click="add(dialog)"
>
报工
</v-btn>
<v-btn
text
@click="editDialog = false;clearFormData()"
>
关闭
</v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
<v-data-table
id="scrolling-table"
:headers="header"
:items="list"
:search="fuzzySearch"
:loading="isLoading"
loading-text="加载数据中"
class="overflow-y:auto"
hide-default-footer
:options.sync="option"
>
<template v-slot:item.actions="{ item }">
<v-icon
class="mr-2"
@click="editItem(item)"
>
mdi-magnify
</v-icon>
</template>
</v-data-table>
<div class="pt-2">
<v-row>
<v-col cols="12">
<v-pagination
v-model="option.page"
:length="option.pageCount"
@change="search"
/>
</v-col>
</v-row>
</div>
</v-card>
<v-snackbar
v-model="snackbar"
:timeout="timeout"
>
{{ snackText }}
<template v-slot:action="{ attrs }">
<v-btn
color="blue"
text
v-bind="attrs"
@click="snackbar = false"
>
关闭
</v-btn>
</template>
</v-snackbar>
</v-container>
</template>
<script>
export default {
name: 'ReportList',
data () {
return {
id: 'page-report-list',
formData: {},
option: {},
billOption: {},
params: {},
fuzzySearch: '',
fuzzyBillSearch: '',
isLoading: false,
isBillLoading: false,
header: [
{
text: '交接编码',
value: 'mission_next_code'
},
{
text: '交接人',
value: 'user_name'
},
{
text: '交接时间',
value: 'mission_time'
},
{
text: '交接数量',
value: 'info_num'
},
{ text: '详细内容', value: 'actions', sortable: false }
],
list: undefined,
attachList: undefined,
snackbar: false,
snackText: undefined,
timeout: 1500,
editDialog: false,
deleteDialog: false,
importDialog: false,
billHeader: [
{
text: '报工任务',
value: 'mission_name'
},
{
text: '报工时间',
value: 'report_time'
},
{
text: '报工数量',
value: 'info_num'
},
{
text: '合格数量',
value: 'info_qualified_num'
},
{
text: '不合格数量',
value: 'info_unqualified_num'
},
{ text: '选择', value: 'actions', sortable: false }
]
}
},
mounted () {
window.page = this
this.search()
},
methods: {
search (callback) {
var _this = this
if (typeof this.option.page !== 'undefined') {
this.params.page = this.option.page
}
if (typeof this.option.itemsPerPage !== 'undefined') {
this.params.pageSize = this.option.itemsPerPage
}
this.isLoading = true
this.utils.req('get', 'api/sdjw-mission-next-list', this.params, function (res) {
if (_this.utils.isAxiosSuccess(res)) {
_this.list = res.list
_this.option.page = res.pager.pageNumber
_this.option.itemsPerPage = res.pager.pageSize
_this.option.pageCount = res.pager.pageCount
_this.isLoading = false
} else {
_this.snackText = res.msg
_this.timeout = -1
_this.snackbar = true
}
})
if (typeof callback === 'function') {
callback()
}
},
searchBill (callback) {
var _this = this
if (typeof this.billOption.page !== 'undefined') {
this.params.page = this.billOption.page
}
if (typeof this.billOption.itemsPerPage !== 'undefined') {
this.params.pageSize = this.billOption.itemsPerPage
}
this.isBillLoading = true
this.utils.req('get', 'api/sdjw-report-select', this.params, function (res) {
if (_this.utils.isAxiosSuccess(res)) {
_this.billList = res.list
_this.billOption.page = res.pager.pageNumber
_this.billOption.itemsPerPage = res.pager.pageSize
_this.billOption.pageCount = res.pager.pageCount
_this.isBillLoading = false
} else {
_this.snackText = res.msg
_this.timeout = -1
_this.snackbar = true
}
})
if (typeof callback === 'function') {
callback()
}
},
add (dialog) {
var _this = this
for (var i of this.attachList) {
i.procedure_user_id = i.selectedUser.join(',')
}
this.formData.itemMap = JSON.stringify(this.attachList)
this.utils.req('post', 'api/sdjw-mission-next-add', this.formData, function (item) {
if (_this.utils.isAxiosSuccess(item)) {
dialog.value = false
_this.clearFormData()
_this.snackText = '新增成功'
_this.timeout = 1500
_this.snackbar = true
_this.search()
} else {
_this.snackText = item.msg
_this.timeout = -1
_this.snackbar = true
}
})
},
refreshFormData (id) {
var _this = this
this.utils.req('get', 'api/sdjw-report-edits', { mission_procedure_id: id }, function (res) {
if (_this.utils.isAxiosSuccess(res)) {
_this.formData = res.obj
_this.attachList = res.list
} else {
_this.snackText = res.msg
_this.timeout = -1
_this.snackbar = true
}
console.log(_this.formData)
})
},
clearFormData () {
this.$set(this, 'formData', {})
},
editItem (item) {
this.refreshFormData(item.mission_procedure_id)
this.editDialog = true
},
importBill () {
this.importDialog = true
this.billList = []
this.searchBill()
},
checkBill (item) {
this.formData.mission_procedure_id = item.mission_procedure_id
this.importDialog = false
}
}
}
</script>
把你选择的任务id传给后端请求任务详情
然后把得到的数据传到dialog组件就行了
如果是请求列表的时候所有信息都给你了
你就拿着你点击的任务id去过滤或者循环出来
1、如果表单所需的数据在列表都有，可以直接赋值
点选择的时候，把所选择的列表数据赋给表单，如：this.form = this.table.list[index] eg:如果怕原数据（也就是table）同时被更改，可以用json.stringify和json.parse先转换一下
2、如果表单所需的数据不完全在列表，就传个id直接去请求服务器