下拉框物品筛选：点击物品类型只显示对应的物品

首先前端页面

findTypes()方法type接口在typecontroller中实现，this.itemTypes = res.data;itemTypes对应下拉框中的v-for="item in itemTypes"！！

itemForm是下拉框v-model="itemForm.typeId"创建的容器

reset() {
  this.name = null
  this.load(1)
  this.itemForm.typeId = null; // 重置物品类型筛选条件
},

load(pageNum) {
  if (pageNum) this.pageNum = pageNum
  this.$request.get('/lost/selectPage', {
    params: {
      pageNum: this.pageNum,
      pageSize: this.pageSize,
      name: this.name,
      TypeId: this.itemForm.typeId
    }
  }).then(res => {
    this.lostData = res.data?.list
    this.total = res.data?.total
  })
},

 <div style="color: #8b4513; font-size: 16px; font-weight: 550;margin-top: 20px">物品筛选
        <!-- 筛选下拉框 -->
        <el-select v-model="itemForm.typeId" placeholder="请选择物品类型" size="mini" @change="load(1)">
          <el-option
              v-for="item in itemTypes"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </div>
 <script>
import E from 'wangeditor'
import axios from 'axios'
export default {
  data() {
    return {
     
      itemForm:{},
      itemTypes: [],
      allItems: [],

    }
  },
  mounted() {
    this.load(1);
    this.findTypes();
  },

  // methods：本页面所有的点击事件或者其他函数定义区
  methods: {
    findTypes() {
      this.$request.get("/type").then(res => {
        if (res.code === '200') {
          this.itemTypes = res.data;
        } else {
          this.$message.error(res.msg)
        }
      })
    },
   
    load(pageNum) {
      if (pageNum) this.pageNum = pageNum
      this.$request.get('/lost/selectPage', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.name,
          TypeId: this.itemForm.typeId
        }
      }).then(res => {
        this.lostData = res.data?.list
        this.total = res.data?.total
      })
    },
   
}
</script>

后端没什么大变化

LostMapper中修改了一处

<select id="selectAll" resultType="com.example.entity.Lost">
    select lost.*,user.name as userName,type.name AS typeName
    from lost
    left join user on lost.user_id = user.id
    left join type on lost.typeId = type.id
    <where>
        <if test="id != null"> and id= #{id}</if>
        <if test="name != null and name != ''"> and lost.name like concat('%', #{name}, '%')</if>
        <if test="userId != null"> and user_id = #{userId}</if>
        <if test="typeId != null"> and lost.typeId = #{typeId}</if>
    </where>
    order by id desc
</select>