RuoYi框架 零碎的知识

一、show-overflow-tooltip

作用：当字段属性太长 超出列宽 那么超过的数据会变成点号，当鼠标放在数据上 会生成悬浮顶 显示全部内容。

示例：

      <ry-table-column :label="$t('cardManagement.Nameofinstitution')" align="left" prop="brhName" max-width="200" show-overflow-tooltip/>

二、：formatter=" ";

作用：不想显示表格集合中的数据，想转换后在显示，可以使用这个格式化。

通过方法转换：

示例：

      <ry-table-column :label="$t('cardManagement.Cardbrand')" align="left" prop="brandName" max-width="200" :formatter="brandIdFormate" show-overflow-tooltip/>


 //表格展示卡品牌-品牌Id
    brandIdFormate(row) {
      if (row.stockNum == this.sum) {
        return row.brandName;
      }
      return `${row.brandId}-${row.brandName}`
    },

通过字典转化：

示例：其实跟方法一样

 //费率配置状态字典翻译
      feeConfigStaFormat(row) {
        return this.selectDictLabel(this.feeConfStaOptions,row.sta);
      },

在formatter中传参使用方法

<ry-table-column :label="$t('fee.FixedHandlingFee')" prop="feeFixedValue" :formatter="row => feeFixFormat(row, 'feeFixedValue')"/>

feeFixFormat(row,type) {
        if (row.feeFixedValue!=null && type === "feeFixedValue"){
          return this.$amtToShow(row.feeFixedValue,row.acctType) + " "+vue.$t(`currency.c_${row.acctType}`);
        }else if(row.feeMax!=null && type === "feeMax") {
          return this.$amtToShow(row.feeMax,row.acctType) + " "+vue.$t(`currency.c_${row.acctType}`);
        }else if (row.feeMin!=null && type === "feeMin"){
          return this.$amtToShow(row.feeMin,row.acctType) + " "+vue.$t(`currency.c_${row.acctType}`);
        }else {
          return null;
        }
      },

三、模版字符串

作用：其实和双引号作用一样的 只是看起来更规范一点  return row.brandId+"-"+ row.brandName;和下面的示例是一个意思。

示例：

      return `${row.brandId}-${row.brandName}`

四、通过字典获取集合 并展示在下拉框中、单选框

示例：

<el-select v-model="updateFeeConfForm.feeType" :placeholder="$t('preDepositAcct.select')"
                     :disabled="feeTypeAbled" @change="changeType(updateFeeConfForm.feeType)">
            <ry-option
              v-for="dict in feeTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
</el-select>

 <el-radio-group v-model="updateFeeConfForm.sta">
            <el-radio
              v-for="dict in feeConfStaOptions"
              :key="dict.dictValue"
              :label="dict.dictValue"
            >{{dict.dictLabel}}
            </el-radio>
</el-radio-group>

this.getDicts('fee_config_type').then(res=>{
    this.feeTypeOptions = res.data;
    });

五、filterable clearable

作用：filterable 可以在下拉框中输入数据 用于筛选数据 , clearable 可以清除下拉框中的数据

示例：

<el-select v-model="addFeeConfForm.itemCode" filterable clearable :placeholder="$t('preDepositAcct.select')"
            >
            <ry-option
              v-for="item in feeItemOptions"
              :key="item.itemCode"
              :label="`${item.itemCode}-${item.itemNm}`"
              :value="item.itemCode"
            />
</el-select>

六、国际化

国际化与过滤器的使用

 <ry-form-item
          :label="$t('fee.acctType')"
          style="flex-grow: 1"
          align="right">
          {{ feeConfDetailForm.acctType | formatCurType}}
</ry-form-item>

filters: {
      // 币种字段格式化
      formatCurType: function (value) {
       return vue.$t(`currency.c_${value}`);
      },
}

currency: {
    c_994: '苏克雷',
    c_064: '努扎姆',
    c_356: '印度卢比',
    c_156: '人民币元',
    c_446: '澳元',
    c_344: '港元',
    c_950: '多哥非洲共同体法郎',
    c_208: '丹麦克朗',