若依-数据字典

发表于2021-05-26更新于2021-06-24字数统计220阅读时长2分

创建数据字典

略过，可以参考说明书第一部分

调用数据字典（下拉框）

效果

下拉框

添加选项

1
2
3
4
5
6
7
8
9
10
<el-form-item label="合同类别" prop="contractType">
  <el-select v-model="queryParams.contractType" placeholder="请选择合同类别" clearable size="small">
    <el-option
      v-for="dict in contractTypeOptions"
      :key="dict.dictValue"
      :label="dict.dictLabel"
      :value="dict.dictValue"
    />
  </el-select>
</el-form-item>

添加参数

1
2
3
4
5
6
data() {
  return {
    // 状态数据字典
    contractTypeOptions: [],
  }
}

添加初始化函数

1
2
3
4
5
created() {
  this.getDicts("qlj_contract_type").then(response => {
    this.contractTypeOptions = response.data;
  });
},

调用数据字典（表单）

效果

表单

添加字典翻译函数

1
2
3
4
5
6
methods: {
  // 字典状态字典翻译
  contractTypeFormat(row, column) {
    return this.selectDictLabel(this.contractTypeOptions, row.contractType);
  },
}

添加翻译参数

1
<el-table-column label="合同类别" prop="contractType" :formatter="contractTypeFormat"/>