zoukankan      html  css  js  c++  java
  • 使用filter过滤器解决下拉列表提交后表格中显示的为列表项为代表的编码而不是汉字

    先看代码:我这里用的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>
  • 相关阅读:
    周末郑州程序员朋友技术交流中的PPT
    WCF并发连接数的问题
    郑州.Net技术人员的招聘信息
    在路上
    Windows8体验(1)安装
    挖掘0day打进不同学校
    记一次绕过宝塔防火墙的BC站渗透
    一次实战中对tp5网站getshell方式的测试
    一次从弱口令到getshell
    一次HW实战
  • 原文地址:https://www.cnblogs.com/shiyiersan/p/14041230.html
Copyright © 2011-2022 走看看