若依ruoyi+AI项目二次开发

//-------------------------
//定义口味名称和口味列表静态数据
const dishFlavorListSelect=ref([
  {name:"辣度",value:["不辣","微辣","中辣","重辣"]},
  {name:"忌口",value:["不要葱","不要蒜","不要香菜","不要
  {name:"甜味",value:["无糖","少糖","半糖","多糖"]}
]);

//-------------------------

  <el-select v-model="scope.row.name" placeholder="请选择口味名称">
   <el-option
     v-for="dishFlavor in dishFlavorListSelect"
     :key="dishFlavor.name"
     :label="dishFlavor.name"
     :value="dishFlavor.name"
   ></el-option>
 </el-select>

 <el-select v-model="scope.row.value" placeholder="请选择口味列表">
   <el-option v-for="value in checkValueList" 
   :key="value" 
   :label="value"
     :value="value"></el-option>
 </el-select>

//存储当前选中口味列表数组
const checkValueList = ref([]);
//定义改变口味名称时更新当前选中的口味列表
function changeFlavorName(row) {
  //根据选中name去查找静态数据的value
  checkValueList.value = dishFlavorListSelect.value.find(item => item.name == row.name).value;
}

 <el-select v-model="scope.row.name" placeholder="请选择口味名称"
  @change="changeFlavorName(scope.row)">
   <el-option v-for="dishFlavor in dishFlavorListSelect" 
   :key="dishFlavor.name"
    :label="dishFlavor.name"
     :value="dishFlavor.name"></el-option>
 </el-select>

//存储当前选中口味列表数组
const checkValueList = ref([]);
//定义改变口味名称时更新当前选中的口味列表
function changeFlavorName(row) {
  //清空当前行value
  row.value = [];
  //根据选中name去查找静态数据的value
  checkValueList.value =
   dishFlavorListSelect.value.find(item => item.name == row.name).value;
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["dishRef"].validate(valid => {
    if (valid) {
      form.value.dishFlavorList = dishFlavorList.value;
      //将口味列表中value通过json工具类转为字符串，加个判断，不为空时进行转换
          if(form.value.dishFlavorList!=null){
       form.value.dishFlavorList.forEach(item => {
  item.value = JSON.stringify(item.value);
});
      if (form.value.id != null) {
        updateDish(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addDish(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

但点击修改，页面无法显示辣度内容，所以需要将口味列表value字符串转为json数组

数据列表回显问题

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _id = row.id || ids.value
  getDish(_id).then(response => {
    form.value = response.data;
    dishFlavorList.value = response.data.dishFlavorList;
    //将口味列表value字符串转为json数组，加个判断，不为空时进行转换
    if( dishFlavorList.value!=null){
      dishFlavorList.value.forEach(item => {
   item.value = JSON.parse(item.value);
 });
    }
    open.value = true;
    title.value = "修改菜品管理";
  });
}

但无法修改口味列表数据

所以需要定义获取焦点方法

const { queryParams, form, rules } = toRefs(data);
//-------------------------
//定义口味名称和口味列表静态数据
const dishFlavorListSelect = ref([
  { name: "辣度", value: ["不辣", "微辣", "中辣", "重辣"] },
  { name: "忌口", value: ["不要葱", "不要蒜", "不要香菜", "不要辣"] },
  { name: "甜味", value: ["无糖", "少糖", "半糖", "多糖"] }
]);
//存储当前选中口味列表数组
const checkValueList = ref([]);
//定义改变口味名称时更新当前选中的口味列表
function changeFlavorName(row) {
  //清空当前行value
  row.value = [];
  //根据选中name去查找静态数据的value
  checkValueList.value =
   dishFlavorListSelect.value.find(item => item.name == row.name).value;
}
//定义口味列表获取焦点时更新当前选中的口味列表
function focusFlavorName(row) {
  //根据选中name去查找静态数据的value
  checkValueList.value =
   dishFlavorListSelect.value.find(item => item.name == row.name).value;
}

//-------------------------

 <el-select v-model="scope.row.value" placeholder="请选择口味列表" multiple
 @focus="focusFlavorName(scope.row)">
   <el-option v-for="value in checkValueList" 
   :key="value" 
   :label="value"
     :value="value"></el-option>
 </el-select> 

页面调整

改标题

改logo

最终效果