数组在筛选条件多选，以及在动态添加输入框数据绑定的应用

01 - 筛选条件多选：住宿等级选择3星，4星，5星；酒店设施选择wifi，热水壶

请求url参数为：price_lt=4000&hotellevel_in=3&hotellevel_in=4&hotellevel_in=5&hotelasset_in=2&hotelasset_in=1

因为对象中不可以存在相同key，不能用 对象 保存数据

相同的key时，对应的值用数组保存

const data = {
            price_lt: 4000,
            hotellevel_in: [3, 4, 5],
            hotelasset_in: [1, 2]
        };

Object.keys()方法得到由key组成的数组

const keys = Object.keys(data);    
//["price_lt", "hotellevel_in", "hotelasset_in"]

遍历keys，

判定key对应的值为否为数组，为数组，则再遍历，才拼接；
key对应的值不为数组，直接拼接

let str = '';
        keys.forEach(item => {
            if (Array.isArray(data[item])) {
                data[item].forEach(v => {
                    str += `${item}=${v}&`
                })
            } else {
                str += `${item}=${data[item]}&`
            }
        })
console.log(str);  
//price_lt=4000&hotellevel_in=3&hotellevel_in=4&hotellevel_in=5&hotelasset_in=1&hotelasset_in=2&

02 - 可以动态增删乘机人输入框，考虑数据如何双向绑定

所有乘机人数据存在数组，每位乘机人都是一个对象；

增加乘机人 - 往数组push一个对象

删除乘机人 - splice

乘机人输入框遍历数组生成

<el-form class="member-info" :model="{ users }" ref="userForm">
        <div
          class="member-info-item"
          v-for="(item, index) of users"
          :key="index"
        >
          <el-form-item
            label="乘机人类型"
            :prop="`users[${index}].username`"
            :rules="{
              required: true,
              message: '请输入乘机人姓名',
              trigger: 'blur',
            }"
          >
            <el-input
              v-model="item.username"
              placeholder="姓名"
              class="input-with-select"
            >
            </el-input>
          </el-form-item>

          <el-form-item
            label="证件类型"
            :prop="`users[${index}].id`"
            :rules="{
              required: true,
              message: '请输入身份证号码',
              trigger: 'blur',
            }"
          >
            <el-input
              v-model="item.id"
              placeholder="证件号码"
              class="input-with-select"
            >
            </el-input>
          </el-form-item>

 //因为有多个乘机人，写成form.username不合适
      users: [
        {
          username: "",
          id: "",
        },
      ],

handleDeleteUser: function (index) {
      //删除数组里面的元素
      this.users.splice(index, 1);
    },
    handleAddUsers: function () {
      //往users里面push对象
      this.users.push({
        username: "",
        id: "",
      });
    },