ruoyi-vue前端数据字典值引用与回显（列表中回显，多选框回显）

<template>
  <el-form-item label="状态">
    <!-- 使用 v-model 进行数据双向绑定 -->
    <el-select v-model="form.status" placeholder="请选择状态">
      <!-- 遍历数据字典中的选项，并显示对应的文本 -->
      <el-option
        v-for="dict in statusOptions"
        :key="dict.value"
        :label="dict.text"
        :value="dict.value">
      </el-option>
    </el-select>
  </el-form-item>
</template>
 
<script>
export default {
  data() {
    return {
      // 表单数据
      form: {
        status: ''
      },
      // 数据字典选项
      statusOptions: [
        { text: '启用', value: '0' },
        { text: '禁用', value: '1' }
      ]
    };
  },
  created() {
    // 假设从后端获取到的数据是 '1'
    this.form.status = this.getStatusFromServer();
  },
  methods: {
    // 模拟从服务器获取状态的方法
    getStatusFromServer() {
      return '1'; // 实际情况下，这里应该是从服务器获取到的数据
    }
  }
};
</script>

这段代码展示了如何在Vue.js中使用Element UI框架的<el-select>和<el-option>组件来创建一个下拉选择框，并通过v-model实现数据的双向绑定。同时，它演示了如何使用数据字典statusOptions来存储选项文本和值，以及如何在组件的created钩子中从服务器获取数据并设置到form.status，实现数据字典的值的回显。