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>
  • 相关阅读:
    第十三章 部署Java应用程序
    分布式系列五: RMI通信
    分布式系列四: HTTP及HTTPS协议
    分布式系列三: 对象序列化
    程序中的 “负数取模” 问题
    【转】Linux C函数库参考
    【转】 Linux中记录终端输出到txt文本文件
    【转】 #define用法详解
    error: ‘to_string’ was not declared in this scope
    exit() 与 return() 的区别
  • 原文地址:https://www.cnblogs.com/shiyiersan/p/14041230.html
Copyright © 2011-2022 走看看