2020-08-30

请选择 男 女 不是人

    <input type="text" v-model="formData.phone" placeholder="电话(精准搜索)" />

    <input type="text" v-model="formData.name" placeholder="姓名(模糊搜索)" />

    <button @click="search(formData)">提交数据</button>
  </div>
  <div class="left">
    <div>
      <el-table :data="realList" style="width: 100%">
        <el-table-column prop="name" label="日期" width="180"></el-table-column>
        <el-table-column prop="phone" label="姓名" width="180"></el-table-column>
        <el-table-column prop="sex" label="地址">
          <template slot-scope="scope">{{ scope.row.sex | filterSex }}</template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <ul>
      <li
        v-for="(item,index) in  realList"
        :key="index"
      >{{item.name}} || {{item.phone}} || {{item.sex | filterSex}}</li>
    </ul>-->
  </div>
</div>

过滤男女

filters: {
filterSex(val) {
switch (val) {
case 1:
return “男”;
break;
case 2:
return “女”;
break;
case 3:
return “不是人”;
break;
default:
return “男”;
}
},
},

script中

created() {
this.search({});
},
methods: {
search({ name, phone, sex }) {
//多条件和模糊查询
this.realList = this.list.filter((item) => {
let matchName = true; // 姓名 筛选
let matchSex = true; // 性别 筛选
let matchPhone = true; // 号码 筛选

    if (sex) {
      matchSex = item.sex == sex;
    }

    if (phone) {
      // console.info(Object.prototype.toString.call(phone));
      matchPhone = item.phone == phone;
    }

    if (name) {
      // 模糊搜索;
      const keys = name
        .toUpperCase() // 转大写
        .replace(" ", "") // 删掉空格
        .split(""); // 切割成 单个字

      matchName = keys.every((key) =>
        item.name.toUpperCase().includes(key)
      );
    }
    return matchName && matchPhone && matchSex;
  });
},

},