极客观点
项目管理
HarmonyOS
vue+element项目，引入select多选，有默认返回值时，不能加选了
`
<template>
<div>
<el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#fafafa'}">
<el-table-column label="类型" field="indexType">
<template slot-scope="scope">
<el-select v-model="scope.row.indexType" placeholder="请选择">
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="字段名" prop="fieldIds" width="300">
<template slot-scope="scope">
<el-select
v-model="scope.row.value"
multiple
placeholder="请选择"
value-key="id"
@change="change"
>
<el-option
v-for="item in fieldIdsOptions"
:key="item.id"
:label="item.value"
:value="item.label"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="字段名" prop="fieldIds" width="300">
<template slot-scope="scope">
<div>
<ul class="tag_text">
<li>
<span>hello</span>
</li>
<li>
<span>hello</span>
</li>
<li>
<span>hello</span>
</li>
<li>
<span>hello</span>
</li>
</ul>
<ol>
<li>1hello</li>
<li>2添加</li>
</ol>
</div>
</template>
</el-table-column>
<el-table-column label="名称" prop="name">
<template slot-scope="scope">
<el-input v-model="scope.row.name" placeholder="请输入内容" />
</template>
</el-table-column>
<el-table-column label="方法" field="indexMethod">
<template slot-scope="scope">
<el-select v-model="scope.row.indexMethod" placeholder="请选择">
<el-option
v-for="item in methodOptions"
:key="item.value"
:label="item.value"
:value="item.label"
/>
</el-select>
</template>
</el-table-column>
<el-table-column title="操作" fixed="right">
<template slot-scope="scope">
<el-button @click.stop="delRowEvent(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-button size="small" :style="{'marginTop':'20px'}" type="primary" @click="addFields">添加索引</el-button>
<el-button size="small" :style="{'marginBottom':'20px'}" type="primary" @click="saveField">保存索引</el-button></div>
</template>
<script>
import { queryFields, entityIndexes, batchEntityIndexes } from '@/api/generate';
export default {
data() {
return {
// 类型
value: '',
typeOptions: [
{
value: 'Normal',
label: 'Normal'
},
{
value: 'Unique',
label: 'Unique'
}
],
methodOptions: [
{
value: 'Btree',
label: 'Btree'
},
{
value: 'Hash',
label: 'Hash'
}
],
fieldIdsOptions: [],
tableData: [{}],
delTableData: []
};},
created() {
// 页面初始化 加载数据
this.load();},
mounted() {
this.getFieldsList();},
methods: {
change(e) {
console.log(e);
},
load() {
const entityId = this.$route.params.tableid;
entityIndexes('GET', {}, entityId).then(res => {
// console.log(123);
// console.log(res);
// console.log(123);
this.tableData = res.data;
// 返回字段名添加到结构中
if (res.data && res.data.length > 0) {
res.data.forEach((item, index) => {
this.tableData[index].value = item.fieldDbNames;
});
}
// 如果成功 查询字段
// if (res.data && res.data.length > 0) {
// this.getFieldsList();
// }
// res.data.entities.forEach((item, index) => {
// res.data.entities[
// index
// ].dbNameValue = `${item.description}(${item.dbName})`;
// res.data.entities[
// index
// ].foreignDbNameValue = `${item.foreignFieldName}(${item.foreignFieldPropertyName})`;
// res.data.entities[
// index
// ].entityValue = `${item.foreignEntityName}(${item.foreignEntityClassName})`;
// });
});
},
// 查询系统字段
getFieldsList(data) {
const entityId = this.$route.params.tableid;
queryFields({ ...data, entityId }).then(res => {
// console.log(res)
if (res.success === true) {
// console.log(this.tableData);
// if (this.tableData && this.tableData.length > 0) {
this.tableData.forEach((item, index) => {
// this.fieldIdsOptions = res.data.entities;
// if (res.data && res.data.length > 0) {
res.data.entities.forEach((item, index) => {
this.fieldIdsOptions[index] = {
value: item.dbName,
label: item.id
};
});
// }
// console.log(res.data.entities);
});
// }
}
});
},
// 添加索引
addFields() {
// 记录添加的数组
// console.log(this.tableData);
this.tableData.push({
add: 'add'
});
// 新加数组时加载下数据
this.getFieldsList();
},
// 关联字段
saveField() {
// 添加的
console.log(this.tableData);
const entityIndexAddDTOList = [];
const entityIndexUpdateDTOList = [];
const deleteEntityIndexIdList = [];
const entityId = this.$route.params.tableid;
this.tableData.forEach((item, index) => {
if (item.add === 'add') {
entityIndexAddDTOList[index] = {
indexMethod: item.indexMethod,
indexType: item.indexType,
name: item.name,
fieldIds: item.value.join(','),
entityId: entityId
};
} else {
// 判断是否是修改'
// console.log(item);
let fieldIds = '';
if (item.value && item.value.length > 0) {
fieldIds = item.value.join(',');
} else {
fieldIds = item.fieldIds;
}
entityIndexUpdateDTOList[index] = {
indexMethod: item.indexMethod,
indexType: item.indexType,
name: item.name,
fieldIds: fieldIds,
entityId: entityId
};
}
});
this.delTableData.forEach((item, index) => {
if (!item.add) {
deleteEntityIndexIdList[index] = {
indexMethod: item.indexMethod,
indexType: item.indexType,
name: item.name,
fieldIds: item.fieldIds,
entityId: entityId
};
}
});
const data = {
entityId: this.$route.params.tableid,
entityIndexAddDTOList: entityIndexAddDTOList,
entityIndexUpdateDTOList: entityIndexUpdateDTOList,
deleteFieldIdList: deleteEntityIndexIdList
};
batchEntityIndexes('POST', data).then(res => {
if (res.success === true) {
this.$message({
message: '关联成功',
type: 'success'
});
this.load();
}
});
},
// 删除
delRowEvent(i, row) {
// 记录删除的数组
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
if (row.add !== 'add') {
this.delTableData.push(row);
}
this.tableData.splice(i, 1);
// console.log(i);
// console.log(this.tableData);
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}}
};
</script>
<style lang="scss">
.tag_text {
li {
list-style: none;
color: #909399;
height: 32px;
line-height: 32px;
margin: 5px;
span {
padding: 0 10px;
background-color: #f4f4f5;
border-color: #e9e9eb;
}
// display: inline-block;}
}
</style>
`
需要看下你select组件绑值的写法，以及你默认赋值那里的代码
感觉应该是你赋值的问题，
考虑改成