如何在elementUi动态表格table中翻译字典值。vue通用方案

实现思路:
先渲染动态行,然后在行里面添加slot插槽，写需要翻译字典的判断。
vue的v-for 的子组件里面 v-if 。 注意v-for与v-if不要写在同一标签内。

例子:

          <el-table style="width: 100%" border :data="tableData">
              <template v-for="(item,index) in tableHead">
                <el-table-column
                  :key="index"
                  :prop="item.keyValue"
                  :label="item.content"
                >
                  <template slot-scope="scope">
                    <span v-if="item.keyValue=='sex'" style="margin-left: 10px">
                    {{ showDictValue(scope.row[item.keyValue],sexDict) }}
                    </span>
                    <span v-if="item.keyValue=='userStatus'" style="margin-left: 10px">
                    {{ showDictValue(scope.row[item.keyValue],userStatusDict) }}
                    </span>
                    <span v-else style="margin-left: 10px">
                    {{ scope.row[item.keyValue] }}
                    </span>
                  </template>
                </el-table-column>
              </template>
            </el-table>
            
    data(){
        tableHead:[{
            keyValue:"username",
            content:"客户姓名"
        },{
             keyValue:"sex",
             content:"客户性别"
        },{
            keyValue:"userStatus",
            content:"客户状态"
        }],
        sexDict:[{   // 此处的字典可以从后台获取（建议方便维护），或者前端写死（不建议）
            value:"01",
            content:"男"
        },{
            value:"02",
            content:"女"
        }],
        userStatusDict:[{
            value:"01",
            content:"上班"
        },{
            value:"02",
            content:"睡觉"
        }]
        
    }

    methods:{
        /**
         * 动态表格字典翻译
         */
        showDictValue(val,dictArr){
          if(val!=""){
              return dictArr.filter(item=>item.value==val)[0].content;
          }
        }
    }

惟求热泪盈眶与成就感 ^_