vue数据字典取键值

最新推荐文章于 2025-06-05 19:32:25 发布

a662852186

最新推荐文章于 2025-06-05 19:32:25 发布

阅读量7.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端 python ViewUI

原文链接：http://www.cnblogs.com/tabCtrlShift/p/9040186.html

本文介绍了在Vue项目中如何正确处理数据字典，包括数据字典的引入、获取、设置EL下拉框选项，以及解决key、label和value的赋值问题，同时提到了在搜索列表中展示数据的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先：项目里的数据字典路由已经配好

进入项目页面

引入数据字典

import { getTypeValue } from '@/api/dict/dictValue/index';

创建前获取到字典

      getTypeValue('org_attr_type').then(response => {
        this.attrTypeOptions = response.data.rows;
      });

设置el下拉框

        <el-form-item label="属性类型" prop="type">
          <el-select class="filter-item" v-model="form.attrType" placeholder="请选择机构类型">
            <el-option v-for="item in attrTypeOptions" :key="item.id" :label="item.labelDefault"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>

注意上面的写法是错误的，注意：key，：label, :value值

搜索列表也显示

        <el-table-column width="200px" align="center" label="属性类型">
      <template slot-scope="scope">
        <span>{{scope.row.attrType}}</span>
      </template>
    </el-table-column>