2022-03-21 vue页面传值

需求：例，当前有人员表、文件表，文件中存储当前人员的不同类型文件，通过filetype字段区分，编辑时需要传输filetype字段获取相应数据。（在编辑页面的基础上编辑文件表内容）

代码：vue

自定义传输字段fileType，传输值为"demand"（自定义传输对象  :fileType，方法为"method"）

<el-button type="primary" @click="edit" fileType="demand">编 辑</el-button>

文件表的增删改查，

1.在props中定义fileType类型为字符串

2.data中的fileType需要将传输过来的值赋上

3.查询列表中的fileType参数需要赋上

<template>
  <div>
    <VxeTablePkg
      :fields="fields" :objId="objId"
      info="文件信息" id-field="id" :init-obj="initObj"
      :get-data="getList" :save-item="saveItem"
      :edit-item="updateItem" :del-item="delItem"
    />

  </div>
</template>
<script>
import VxeTablePkg from '@/views/srm/components/VxeTablePkg'
import { listFiledata, addFiledata, updateFiledata, delFiledata } from '@/api/srm/project/filedata'


export default {
  name: 'Filedata',
  props: {
    objId: {
      type: Number
    },
    obj: {
      type: Object
    },
    //设置字段类型为字符串
    fileType:{
      type: String
    },
  },
  components: { VxeTablePkg },
  data() {
    return {
      fields: [],
      initObj: {
        personId: this.objId
        ,year: null
        ,fileName: null
        ,fileId: null
        //将编辑页的fileType(demand)赋值到当前页的fileType
        ,fileType: this.fileType
      }
    }
  },
  created() {

  },
  watch: {
    obj: {
      handler(value) {
        if (value) {
          this.initObj.personId= this.objId
        }
      },
      deep: true
    }
  },
  beforeMount() {
    this.fields = [
      {field: 'year', title: '年度', type: 'input' }
      ,{field: 'fileName', title: '文件名称', type: 'input'}
      ,{field: 'fileId', title: '附件', type: 'upload', fileField: 'fileInfo',multiple:false}
    ]

  },
  methods: {
    // 获取列表
    async getList() {
      let that = this
      let list = await listFiledata({
        //将人员id、文件类型赋值，然后查询list
        personId: that.objId,
        fileType: that.fileType,
        pageNum: 1,
        pageSize: 999,
        orderByColumn: 'createTime',
        isAsc: 'asc'
      })
      return list
    },
    // 添加
    saveItem(item) {
      return addFiledata(item)
    },
    // 更新
    updateItem(item) {
      return updateFiledata(item)
    },
    // 删除
    delItem(id) {
      return delFiledata(id)
    }
  }
}

</script>
<style>

</style>