vue前端双向绑定问题，需求解决

Question

我需要在这里点击选择之后，

需要在这个框中显示我所选择的信息应该怎么办

Answer 1

点击表格内容后，拿到所选择行的内容，然后this去赋值表单的内容。

Answer 2

<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>

Answer 3

把你选择的任务id传给后端请求任务详情
然后把得到的数据传到dialog组件就行了

如果是请求列表的时候所有信息都给你了
你就拿着你点击的任务id去过滤或者循环出来

Answer 4

1、如果表单所需的数据在列表都有，可以直接赋值
点选择的时候，把所选择的列表数据赋给表单，如：this.form = this.table.list[index] eg:如果怕原数据（也就是table）同时被更改，可以用json.stringify和json.parse先转换一下
2、如果表单所需的数据不完全在列表，就传个id直接去请求服务器