解决报错Invalid prop: type check failed for prop “value” .Expected String, Number, got Array 并实现子传父展示在页面

子组件是表格，通过选择表格行数据，点击确定时，将行数据中的姓名展示在父组件的select中。

我本来的思路是展示在父组件的input中，由于传递的是数据，导致页面报错

后来通过百度，将input改成select，并将下拉箭头隐藏，便实现了需求。

//子组件
<template>
  <div class="app-container">
    <!-- 对话框(选择收件人) -->
    <el-dialog title="选择收件人" :visible.sync="open" :before-close="toggleDialog" :close-on-click-modal="false" width="1200px" append-to-body>
        <el-table v-loading="loading" :data="userList" @select="selectSingle" @select-all="selectAll" :row-key="getRowKeys">
            <el-table-column type="selection" align="center" width="55" :reserve-selection='true'/>
            <el-table-column label="用户账号" align="center" key="username" prop="username"
                             :show-overflow-tooltip="true"/>
            <el-table-column label="用户姓名" align="center" key="nickname" prop="nickname"
                             :show-overflow-tooltip="true"/>
            <el-table-column label="手机号码" align="center" key="mobile" prop="mobile"
                             width="120"/>
            <el-table-column label="邮箱" align="center" key="email" prop="email"/>
          </el-table>

          <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                      @pagination="getList"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="$emit('cancel', false)">关 闭</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  import {listUser} from "@/api/system/user";

  export default {
    name: "",
    props: {
      open: {
        type: Boolean
      },
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 用户表格数据
        userList: null,
        // 表单参数
        form: {},
        // 查询参数
        queryParams: {
          pageNo: 1,
          pageSize: 10,
          username: undefined,
        },
        //存放全选数据
        multipleSelection: [],
        //存放用户
        selectUser: [],
      };
    },
    created() {
      this.getList();
    },
    methods: {
      toggleDialog() {
        this.$emit('toggleDialog')
      },
      /** 查询用户列表 */
      getList() {
        this.loading = true;
        listUser(this.queryParams).then(response => {
            this.userList = response.data.list;
            this.total = response.data.total;
            this.loading = false;
          }
        );
      },

    /** 跨页多选操作 */
      getRowKeys(row){
        return row.id
      },

      /** 当用户手动勾选数据行的 Checkbox 时触发的事件*/
      selectSingle(selection, row) {
        // console.log(selection, row, '手动勾选一个或多个')
        this.multipleSelection = selection
      },

      /** 当用户手动勾选全选 Checkbox 时触发的事件*/
      selectAll(selection) {
        // console.log(selection, '全选')
        this.multipleSelection = selection
      },

      /** 确认按钮 */
      submitForm() {
        //先将传递给父组件的数据清空
        this.selectUser = []
        if (this.multipleSelection.length <= 0) {
          this.$message({
            message: '请选择一条数据',
            type: 'warning'
          });
        } else {
          this.multipleSelection.map(item => {
            // console.log(item, '单选')
            // 再赋值，将数据传递给给父组件
            this.selectUser.push({'name': item.nickname, 'id': item.id})
          })
          // console.log(this.selectUser, '已选用户', this.multipleSelection)
          
          //在子组件的点击事件中，将获取的值传递给父组件
          this.$emit('submit', this.selectUser)
        }
      },
    }
  };
</script>

//父组件
<template>
  <div>
    <!-- 写信数据-->
    <el-form ref="form" :model="form" :rules="rules" label-width="100px" v-show="showLetter"
             style="width: 80%;margin: 0 auto;">
      <el-form-item label="发送到:" prop="addressee">
        <el-select v-model="form.addressee" multiple style="width: 90%" placeholder="请选择收件人" disabled>
          <el-option v-for="item in selectUserList" :key="item.value" :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
        <el-button type="primary" @click="choice" style="margin-left: 10px;">选择</el-button>
      </el-form-item>
    </el-form>

    <!--选择收件人组件-->
    <select-recipients :open="open" @toggleDialog="cancel" :cancel="cancel" @submit="submit"></select-recipients>
  </div>
</template>

<script>
  import SelectRecipients from "@/views/message/email/components/selectRecipients";

  export default {
    name: "",
    components: {SelectRecipients},
    data() {
      return {
        // 显示搜索条件
        showLetter: true,
        // 是否显示弹出层
        open: false,
        //表单数据
        form: {
          addressee: [],
        },
        //  表单校验
        rules: {
          addressee: [
            {required: true, message: '请选择收件人!', trigger: 'change'},
          ],
        },
        selectUserList: []
      };
    },
    methods: {
      //选择收件人
      choice() {
        this.open = true
        console.log('选择收件人', this.open)
      },

      /** 子组件确认按钮 */
      submit(msg) {
        console.log(msg, '用户')
        // 先清空select的model
        this.form.addressee=[]
        this.open = false;
        // options赋值（可不写）
        this.selectUserList = msg.map(item => {
          // console.log(item, 'item')
        //再赋值select的model
          this.form.addressee.push(item.name)
          return {value: `${item.id}`, label: `${item.name}`};
        });
      },
    }
  };
</script>

<style lang="scss" scoped>
//隐藏select 下拉箭头
  ::v-deep .el-input__suffix {
    display: none;
  }
</style>

实现跨页多选

在el-table中增加 :row-key="getRowKeys"

在type为selection的el-table-column中添加 :reserve-selection='true'

在methouds中写getRowKeys方法