vue el-table 判断数据重复问题？
如上图，选择应用名称关联角色和资源分类，选择资源分类显示它下面拥有的“操作”，我提交授权之后，再次选择同样的会重复，怎么判断重复数据，然后将复选框禁用，
<template> <div class="role-perm">
<div class="content">
<fin-form :model="form" ref="form">
<fin-form-item prop="appId" label="应用名称">
<fin-select v-model="form.appId" placeholder="请选择应用" @change="handleAppChange">
<fin-option
v-for="item in appList"
:key="item.value"
:label="item.label"
:value="item.value"
></fin-option>
</fin-select>
</fin-form-item>
<fin-form-item prop="roleId" label="选择角色">
<fin-select
v-model="form.roleId"
clearable
placeholder="请选择角色"
@change="handleRoleChange"
>
<fin-option
v-for="item in roleList"
:key="item.value"
:label="item.label"
:value="item.value"
></fin-option>
</fin-select>
</fin-form-item>
<fin-form-item prop="typeId" label="资源分类">
<fin-select
v-model="form.typeId"
clearable
placeholder="请选择资源"
@change="handleResourceTypeChange"
>
<fin-option
v-for="([value, label], index) in Object.entries(TYPE_MAP)"
:label="label"
:value="value"
:key="`app-auth-type-${index}`"
/>
</fin-select>
</fin-form-item>
<fin-form-item label="选择操作">
<div class="operate-table">
<form-search :elements="forms" @search="search"></form-search>
<app-table
ref="tableOperate"
:service="tableOperateService"
:columnTypes="columnTypes"
:columns="columns"
:beforeSearch="handleParams"
:selectAble="handleIsSelect"
rowKey="id"
:pageOpt="{ layout: 'prev, pager, next', limit: 5 }"
@selection-change="changeOperate"
:immediateSearch="false"
>
</app-table>
</div>
</fin-form-item>
</fin-form>
<div class="add-organ-btn">
<fin-button
type="primary"
:disabled="appList.length === 0 || roleList.length === 0 || checkedRows.length === 0"
@click="addOperateAuth"
>
添加到权限
</fin-button>
</div>
<perm-list :permissions="checkOperateAuths" @perm-delete="handleDeletePerm"></perm-list>
</div>
<div class="footer">
<fin-button @click="goBack">取 消</fin-button>
<fin-button type="primary" :disabled="checkOperateAuths.length === 0" @click="updateOrSave"
>确 定</fin-button
>
</div>
</div>
</template>
<script>
// import PermOperate from './components/PermOperate.vue';
// import PermScopeValue from './components/PermScopeValue.vue';
import AppTable from '@/components/appTable';
import PermList from './components/PermList.vue';
import FormSearch from '@/components/formSearch';
import {
getUsersApps,
getRoleAppid,
getOperateList,
createOperateAuth,
getOperateAuthList,
} from '../../service';
export default {
components: {
PermList,
AppTable,
FormSearch,
},
data() {
return {
appList: [],
roleList: [],
resourceTypes: [],
params: {},
forms: [
{
prop: 'url',
placeholder: '请输入资源地址',
},
],
form: {
appId: '',
roleId: '',
typeId: '',
roleName: '',
appName: '',
typeName: '',
},
checkOperateAuths: [],
roleName: [],
checkedRows: [],
apiNames: [],
disabledCheck: [],
authList: [],
appIdList: [],
};
},
created() {
const { TYPE_MAP } = this.$const;
this.TYPE_MAP = TYPE_MAP;
this.columnTypes = ['selection'];
this.tableOperateService = getOperateList;
this.columns = [
{ prop: 'name', label: '操作名称' },
{ prop: 'code', label: '操作编码' },
{ prop: 'type', label: '资源类型', formatter: (row) => TYPE_MAP[row.type] },
{ prop: 'url', label: '资源地址' },
];
getUsersApps().then((res) => {
this.appList = res.map((item) => ({
label: item.name,
value: item.id,
}));
});
this.operateMap = {};
},
methods: {
search(params) {
if (params) {
const obj = {};
Object.entries(params).forEach(([key, value]) => {
if (value) {
obj[key] = value;
}
});
this.params = obj;
}
this.$refs.tableOperate.search();
},
// 选择应用
handleAppChange() {
if (this.form.appId) {
getRoleAppid({
appId: this.form.appId,
}).then((res) => {
this.roleList = res.map((item) => ({
label: item.name,
value: item.id,
}));
});
} else {
this.roleList = [];
}
this.form.roleId = '';
this.$nextTick(() => {
this.$refs.tableOperate.search();
});
},
// 选择角色
handleRoleChange() {},
// 选择资源
handleResourceTypeChange() {
if (this.form.appId) {
this.$refs.tableOperate.search();
getOperateList({ appId: this.form.appId }).then((res) => {
this.appIdList = res.list;
console.log('----appIdList', res.list);
});
getOperateAuthList({ roleId: this.form.roleId }).then((res) => {
this.authList = res.list;
console.log('----authList', res.list);
});
}
},
// 如果有重复数据则禁用复选框
handleIsSelect(row) {
console.log(row);
if (this.disabledCheck.length) {
return this.disabledCheck.indexOf(row.id) === -1;
}
return true;
},
changeOperate(rows) {
this.checkedRows = rows;
},
addOperateAuth() {
if (!this.form.roleId) {
return this.$message.warning('请选择角色！');
}
if (!this.form.typeId) {
return this.$message.warning('请选择资源分类！');
}
const app = this.appList.find((item) => item.value === this.form.appId);
const appName = app.label;
const role = this.roleList.find((item) => item.value === this.form.roleId);
const roleName = role.label;
this.checkedRows.forEach((item) => {
let obj = {};
obj.appId = this.form.appId;
obj.appName = appName;
obj.roleId = this.form.roleId;
obj.roleName = roleName;
obj.apiId = item.id;
obj.operateName = item.name;
obj.typeId = this.form.typeId;
obj.typeName = this.TYPE_MAP[item.type];
obj.url = item.url;
const uid = `${obj.apiId}-${obj.typeId}`;
if (!this.operateMap[uid]) {
this.operateMap[uid] = true;
this.checkOperateAuths.push(obj);
} else {
this.$message.success('已存在，请重新选择！');
}
this.$refs.tableOperate.clearSelections();
});
},
goBack() {
this.$router.go(-1);
},
handleDeletePerm(index) {
this.checkOperateAuths.splice(index, 1);
},
updateOrSave() {
let params = [];
this.checkOperateAuths.forEach((item) => {
let obj = {};
obj.apiId = item.apiId;
obj.appId = item.appId;
obj.roleId = item.roleId;
params.push(obj);
});
createOperateAuth(params).then(() => {
this.$message.success('创建角色资源权限成功！');
this.goBack();
});
},
handleParams(params) {
const data = {
...params,
...this.params,
appId: this.form.appId,
};
if (this.form.typeId) {
data['type'] = this.form.typeId;
}
return data;
},
},
};
</script>
以上是 vue el-table 判断数据重复问题？ 的全部内容， 来源链接： utcz.com/p/933075.html
