Beheben Sie den Fehler „Ungültige Requisite: Typprüfung für Requisite „Wert“ fehlgeschlagen. String, Zahl erwartet, Array erhalten“ und realisieren Sie die Anzeige von Kind zu Eltern auf der Seite

Die untergeordnete Komponente ist eine Tabelle. Wenn Sie die Tabellenzeilendaten auswählen und auf „OK“ klicken, wird der Name in den Zeilendaten in der Auswahl der übergeordneten Komponente angezeigt.

Meine ursprüngliche Idee war, es in der Eingabe der übergeordneten Komponente anzuzeigen. Da die Daten übergeben wurden, meldete die Seite einen Fehler

Später wurde die Eingabe über Baidu in „Auswählen“ geändert und der Dropdown-Pfeil ausgeblendet, wodurch die Anforderung realisiert wurde.

//子组件
<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>

Implementieren Sie eine seitenübergreifende Mehrfachauswahl

Fügen Sie el-table hinzu: row-key="getRowKeys"

Fügen Sie die el-table-column hinzu, deren Typ „selection“ ist: „reserve-selection='true‘“

Schreiben Sie die getRowKeys-Methode in Methoden