先看代码:我这里用的elementui,功能为下拉列表选中提交并展示在表格。
问题是:列表中内容是接口获取的,下面蓝色tableData为每次提交下拉列表后给表格中绑定的数据
用法为红色代码部分,需要有element使用经验方能读懂。
<el-table :data="tableData"> <el-table-column prop="country" label=“国家">
//这里的意思就是表格中要展示的就是tableData.country的值,然后通过filterCountry函数进行过滤 <template slot-scope="scope">{{ scope.row.country | filterCountry }}</template> </el-table-column> </el-table>
<script>
//声明一个空对象,写一个过滤器,过滤器函数中返回一个需要展示在表格中的内容
let countryMap = {}
export default{
//这是过滤器写法
filters: {
filterCountry(val){
return countryMap[val]
}
}
mounted(){
//这里是拿到接口中的数据并循环每一项,因为value值是数字但是展示在表格的不能是数字,现在的作用是在表格中展示为value对应的label
jiekou().then(res => {
res.data.country.forEach(item => {
//循环出来的每一项item,拥有当前value的这一项,赋值为label值
countryMap[item.value] = item.label
})
})
}
}
</script>
使用filter过滤器解决下拉列表提交后表格中显示的为列表项为代表的编码而不是汉字
原文:https://www.cnblogs.com/shiyiersan/p/14041230.html