若以框架下拉框绑定字典以及页面显示字典的值

最新推荐文章于 2024-08-02 19:29:15 发布

一昂阳1123

最新推荐文章于 2024-08-02 19:29:15 发布

阅读量568

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_63524137/article/details/131947907

版权

文章展示了如何在前端界面中使用Vue.js组件（ElementUI）来显示和绑定字典值。在表格中，利用<el-table-column>展示存在腐败和不作为问题的字典标签；而在表单中，通过<el-form-item>和<el-select>实现下拉框选择，动态加载sys_yes_no字典类型的数据。

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

1：页面显示字典的值
<el-table-column label="是否存在腐败和不作为问题并移交纪委"  align="center" prop="zxfzFbbzwwt">
  <template slot-scope="scope">
    <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.zxfzFbbzwwt"/>
  </template>
</el-table-column>

2form页绑定字典的下拉框

<el-form-item label="是否存在腐败和不作为问题并移交纪委" prop="zxfzFbbzwwt">
  <el-select v-model="form.zxfzFbbzwwt" placeholder="请输入是否存在腐败和不作为问题并移交纪委">
    <el-option
      v-for="dict in dict.type.sys_yes_no"
      :key="dict.value"
      :label="dict.label"
      :value="dict.value"
    />
  </el-select>
</el-form-item>