若依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>