动态修改表头字段中文名

最新推荐文章于 2023-11-02 20:26:16 发布

原创

最新推荐文章于 2023-11-02 20:26:16 发布 · 429 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种在Vue.js中动态创建并赋值对象的方法，通过`created`钩子获取数据并更新`fields`对象。在UI展示上，利用`v-for`指令和条件判断实现列表中表格列的动态label显示，同时展示了如何从后台获取字典数据并用于表格列的显示。此外，还展示了如何处理空值情况，确保数据的完整呈现。

1、js
增加fields 对象
create方法增加给自定义字段赋值

 data() {
        return {
           fields: {},
            dataModel: [],
           ...
           }
           },
created() {
    this.hasAllScopes = user.state.allScopes
    this.$nextTick(() => {
        getField('data_teacher_otherduty').then(data => { 
          data.forEach(obj=>{  
             this.fields[obj.val] =  obj.label
          }) 
        this.dataModel = data
      })
    })
},

2、ui
列表label 取值动态

  <el-table-column :show-overflow-tooltip="true" prop="country" :label="fields['country'.toLowerCase()]==null?'组织/期刊所在国':fields['country'.toLowerCase()]" />
   <el-table-column :show-overflow-tooltip="true" prop="periodicalPost" :sortable="'custom'" :label="fields['periodicalPost'.toLowerCase()]==null?'职务':fields['periodicalPost'.toLowerCase()]">
          <template slot-scope="scope">
           {
  
  { dict.label.periodical_post[scope.ro

最低0.47元/天解锁文章