精华内容
下载资源
问答
  • }, // 学历字典翻译 highestEducationFormat(row, column) { return this.selectDictLabel(this.educationList, row.highestEducation); }, // 专业字典翻译 majorTypeFormat(row, column) { return this....

    第一种:

     <el-table :data="teacherList">
                                <el-table-column label="姓名" align="center" prop="teacherName" min-width="70"> </el-table-column>
                                <el-table-column label="性别" align="center" prop="sex" :formatter="sexFormat"></el-table-column>
                                <!-- <el-table-column label="证件类型" align="center" prop="cardType"></el-table-column> -->
                                <el-table-column label="身份证号" align="center" prop="cardNo" min-width="150"/>
                                <el-table-column label="最高学历" align="center" prop="highestEducation" :formatter="highestEducationFormat" />
                                <el-table-column label="专业" align="center" prop="majorType" :formatter="majorTypeFormat"/>
                                <el-table-column label="工作性质" align="center" prop="workType" :formatter="workTypeFormat" />
                                <el-table-column label="教师培训合格证书编号" align="center" prop="secTrainCert1" />
                            </el-table>
    
     methods: {
            // 性别字典翻译
            sexFormat(row, column) {
                return this.selectDictLabel(this.sexList, row.sex);
            },
            // 学历字典翻译
            highestEducationFormat(row, column) {
                return this.selectDictLabel(this.educationList, row.highestEducation);
            },
            // 专业字典翻译
            majorTypeFormat(row, column) {
                return this.selectDictLabel(this.sysMajorTypeList, row.majorType);
            },
            // 工作性质字典翻译
            workTypeFormat(row, column) {
                return this.selectDictLabel(this.sysWorkTypeList, row.workType);
            },
    

    第二种

     <el-table-column label="专业类别" align="center" prop="majorType" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.majorType | sysMajorType}}</span>
            </template>
          </el-table-column>
          <el-table-column label="培训资格" align="center" prop="teachType">
            <template slot-scope="scope">
              <span>{{scope.row.teachType | sysTeachType}}</span>
            </template>
          </el-table-column>
          <el-table-column label="从事本专业年限" align="center" prop="workMajorAge" width="200"></el-table-column>
          <el-table-column label="专职/兼职" align="center" prop="workType" width="100">
            <template slot-scope="scope">
              <span> {{scope.row.workType | sysWorkType}}</span>
            </template>
    
          </el-table-column>
    
    // 培训资格
    export function sysTeachType(type) {
      let array = store.getters.sysTeachTypeList;
      let value = '其他';
      array.forEach((item) => {
        if (item.dictValue === type) {
          value = item.dictLabel
        }
      })
      return value;
    }
    
    // 工作性质
    export function sysWorkType(type) {
      let array = store.getters.sysWorkTypeList;
      let value = '其他';
      array.forEach((item) => {
        if (item.dictValue === type) {
          value = item.dictLabel
        }
      })
      return value;
    }
    
    直接引用公共接口:
    store.getters.sysTeachTypeList;//公共接口
    

    页面引用公共接口

    <script>
      import { mapGetters } from "vuex";
      export default {
        name: "teacher",
        computed: {
          ...mapGetters([
            "educationList", // 学历
            "sexList",// 性别
            "sysnationList",// 民族
            "sysPoliticsList",// 政治面貌
            "sysMajorTypeList",//专业类别
            "sysTeachTypeList",// 培训资格
            "sysWorkTypeList",// 工作性质
          ]),
        },
        data() {
          return {
            // 遮罩层
    
      <el-form-item label="性别" prop="sex">
                  <el-select
                    v-model="dialogForm.sex"
                    placeholder="请选择"
                    style="width: 270px;"
                    :disabled="sexDisabled"
                  >
                    <el-option
                      v-for="item in sexList" //sexList 引用
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
    
    展开全文
  • vue表格el-table-column数据翻译字段

    万次阅读 2018-06-12 17:10:48
    state传来的是码值,需要转换成汉字,如:1转为成功,2转为失败&lt;el-table-column align="center" min-width="100px" label="状态" prop="state"...

    state传来的是码值,需要转换成汉字,如:1转为成功,2转为失败

    <el-table-column align="center" min-width="100px" label="状态" prop="state" :formatter = "stateFormat">
          </el-table-column>

    使用 :formatter = "stateFormat"

    在方法区:

    methods: {
          stateFormat(row, column) {
            console.log(row.state)
            if (row.state === 0) {
              return '未上链'
            } else if (row.state === 1) {
              return '成功'
            } else if (row.state === 2) {
              return '上链失败'
            }
          }
    .....

    展开全文
  • vue表格el-table-column数据翻译字段

    千次阅读 2019-07-09 10:49:16
    vue表格el-table-column数据翻译字段 以上是显示后台返回的1 or 0 需求是要求从1和0 改成已审核和未审核 使用 :formatter = “stateFormat” 在methods区: methods: { stateFormat(row, column) { if (row.is...

    vue中表格el-table-column数据翻译字段

    以上是显示后台返回的1 or 0

    需求是要求从1和0 改成已审核和未审核


    使用 :formatter = “stateFormat”

    在methods区:

    methods: {
    stateFormat(row, column) {
    if (row.isstate === 0) {
            return ‘未审核’
          } else if (row.isReview === 1) {
             return ‘已审核’ }
        }
      }

    然后页面就可以了,页面显示已审核和未审核了。

    展开全文
  • element 表格动态数据翻译 <el-table-column :formatter="stateFormat" align="center" prop="typeId" label="类型" min-width="5%" ></el-table-column> stateFormat(row, column) { return...
    • element 表格动态数据翻译
          <el-table-column
          :formatter="stateFormat"
            align="center"
            prop="typeId"
            label="类型"
            min-width="5%"
          ></el-table-column>
    
           stateFormat(row, column) {
              return  this.activevityList.map((item, index) => {
            if(row.typeId == item.id ){
               return item.couponTypeName;
            }
          });
        },
    
    
    展开全文
  • “Error in render: "TypeError: Cannot read property '0' of undefined"”渲染错误问题搭建项目商家详情头部时,能够完整渲染出整体头部界面无问题,但开发者工具仍然报出...具体如下百度翻译:见文之意:这...
  • 我在使用element-ui中的表格时由于我十多级表头并且数据量很大, 并且后台给我的数据都是1或2都需要我翻译, 然后我先去看了element的文档,发现有一个formatter,但是这个只能格式化为统一的; 我这里需要格式话好...
  • vue插件集合

    千次阅读 2019-09-29 13:39:01
    https://github.com/vuejs/awesome-vue 从 Components & Libraries 开始都是插件了,先摘录,...表格/数据网格 vuetable-2 - 数据表简化 vue-tables-2 - 适用vue2版本的网格组件 vue-datasource - vue服...
  • 1、bootstrap-vue表格里面做文字转译,将后台返回的状态码翻译 &lt;b-table striped bordered hover :items="list" :fields="theads" show-empty empty-text="没有查询到数据" ...
  • 本项目技术栈基于 ES2015+、vue、vuex、vue-router 、axios 和 element-ui,所有的请求数据都使用Mock.js模拟,提前了解和学习这些知识会对使用本项目有很大的帮助。 相关文档 老板让我十分钟上手nx-admin Vue2.0...
  • 本项目技术栈基于 ES2015+、vue、vuex、vue-router 、axios 和 element-ui,所有的请求数据都使用Mock.js模拟,提前了解和学习这些知识会对使用本项目有很大的帮助。 相关文档 老板让我十分钟上手nx-admin Vue2.0...
  • Breaking :翻译文件的 key 不再是中文,如果有修改过英文翻译,需要换成新 key (#1416) (#1418) 拆解 factory.tsx,添加 RootRenderer,并能 处理部分 action, 直接渲染个按钮也能弹窗,发ajax了 (#1425) Text ...
  • front-end-Doc 前端文档汇总(含代码规范、开发流程、知识分享,...Angular数据绑定原理 https://github.com/Pasvaz/bindonce 一些扩展Angular UI组件 https://github.com/angular-ui Ember和AngularJS的性能测试 ...

空空如也

空空如也

1 2
收藏数 23
精华内容 9
关键字:

vue表格数据翻译

vue 订阅