首页 VueJS 遍历json所有list进行赋值

遍历json所有list进行赋值

作者:胡同里的砖头 围观群众:59 更新于:2025-07-22

const state = reactive({
util: {
aList: [{val:'abv'},{val:'wfasd'},{val:'klj'}],
bList: [{val:'terf'},{val:'gfds'},{val:'mbnn'}],
cList: [{val:'ghfsa'},{val:'puio'},{val:'gdf'}]
},
// 用于显示过滤后的列表
filtered: {
aList: [],
bList: [],
cList: []
},
queryForm: {
a: '',
b: '',
c: ''
}
})
筛选方法:
const filterList = (query, listName) => {
if (query.length > 0) {
state.filtered[listName] = state.util[listName].filter(item =>
item.val.toLowerCase().includes(query.toLowerCase())
)
} else {
// 如果查询为空,则显示完整列表
state.filtered[listName] = [...state.util[listName]]
}
}
为每个 el-select 绑定对应的列表和过滤方法:
<el-select
v-model="queryForm.a"
clearable
filterable
:filter-method="(e) => filterList(e, 'aList')"
style="width: 240px"
>
<el-option
v-for="item in filtered.aList"
:key="item.val"
:label="item.val"
:value="item.val"
/>
</el-select>

<el-select
v-model="queryForm.b"
clearable
filterable
:filter-method="(e) => filterList(e, 'bList')"
style="width: 240px"
>
<el-option
v-for="item in filtered.bList"
:key="item.val"
:label="item.val"
:value="item.val"
/>
</el-select>
初始化 filtered 列表
onMounted(() => {
// 初始化所有过滤列表
Object.keys(state.util).forEach(key => {
state.filtered[key] = [...state.util[key]]
})
})

  • 本文标题: 遍历json所有list进行赋值
  • 文章分类:【VueJS】
  • 非特殊说明,本文版权归【胡同里的砖头】个人博客 所有,转载请注明出处.
留言评论
站点声明:
1、本站【胡同里的砖头】个人博客,借鉴网上一些博客模板,取其各优点模块自行拼装开发,本博客开发纯属个人爱好。
2、所有笔记提供给广大用户交流使用,可转载,可复制,纯个人开发所遇问题锦集记录使用
Copyright © huzlblog.com All Rights Reserved. 备案号:苏ICP备2021056683号-8