Vue.js
Element 筛选
发布于 8 个月前 作者 huaer 461 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

最近在写项目的时候遇到一个功能要求，就是列表的筛选展示，代码如下

遇到的问题就是如何把列表头名称改为中文，

5 回复

这个属于排序问题了吧， 好像有个 sortable 属性。

具体， 可以参考文档：

https://element.eleme.cn/#/zh-CN/component/table

排序章节

可以新建一个 formTheadLabel 对象， 存储一下就好了：

data() {
    return {
        ...
        formTheadLabel: {
             app: "苹果",
             banana: "香蕉"
        }
    }
}

轮询的时候， label 用 fromTheadLabel 表示就好了

<el-table-column  v-for="fruit  in  formThead"  :key="fruit"  :label="fromTheadLabel[fruit]">

对了 大佬 如果循环里面有image 这样的一列 咋个操作呢？

这个知道 ， 就是不知道如何在在循环的时候将某一项上加上这个功能，

其实吧， 你可以再多个排序的配置，但是这样维护成本就高了。 建议维护下 head属性。大致如下：

data() {
    return {
        ...
        formThead: [
              {
                   code: "app",
                   label:  "苹果",
                   sort:  false,
              },
              {
                   code: "banana",
                   label:  "香蕉",
                   sort:  false,
              },
              {
                   code: "submitTime",
                   label:  "提交时间",
                   sort:  true,
              }
        ]
    }
}

这样轮询的时候改下：

<el-table-column  
      v-for="fruit  in  formThead"  
      :key="fruit.code" 
      :prop="fruit.code"
      :label="fruit.label" 
      :sortable="fruit.sort"
>
回到顶部