前言:
这是一个复选框,复选框的内容是通过后台获取过来的,选中后提交表单要传一个数组(数组里是权限的id
)给后台。大概就是这样了。。。我都语无伦次了。。。。
正题:
- 首先得从后台获取到数据。。。。这是获取后台的数据,就不详细说了吧。。。。
mounted() {
this.$api.permissionsList(1, 100).then(res => {
//console.log(res.data.data)
this.rolesList = res.data.data
})
},
就是获取到这个权限列表而已。
- 这是elementui 复选框的组件
<el-form-item label="权限选择">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedRoles" @change="CheckedRolesChange">
<el-checkbox v-for="role in rolesList" :label="role" :key="role.id">
{{role.name}}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
- 这是data里定义的一些相关属性
<script>
export default {
data() {
return {
rolesList: [],
checkedRoles: [],
checkAll: false,
isIndeterminate: false,
}
}
}
<script>
- 这是方法体。。自己看注释吧,写的有点烂,我自己都不想看第二遍(
哈哈哈哈)
methods: {
/* 全选权限 */
handleCheckAllChange(val) {
//判断数组是否有相同数字或字符,有返回true。正则表达式
Array.prototype.in_array = function(e) {
var r = new RegExp(',' + e + ',');
return (r.test(',' + this.join(this.S) + ','));
};
/* 三元表达式 */
this.checkedRoles = val ? this.rolesList : [];
for (let i = 0; i < this.checkedRoles.length; i++) {
let roleid = this.checkedRoles[i].id
//判断权限数组里是否存在相同的ID,为true跳出判断,不能用return,不然会跳出循环。为false追加进权限数组里
let ss = this.form.permission_id.in_array(roleid)
if (ss === true) {
continue;
} else {
this.form.permission_id.push(roleid)
}
}
//假设val为true(全选状态),就把权限ID追加(push)进permission_id[]数组里;否则为空
this.form.permission_id = val ? this.form.permission_id:[]
console.log(this.form.permission_id)
},
/* 单选 */
CheckedRolesChange(value) {
this.checkedRoles = value
let checkedCount = value.length;
//判断假如单选的长度与权限列表长度一致则为true显示勾,否则为false
this.checkAll = checkedCount === this.rolesList.length;
//点击单选时,判断选择的权限数组里是否存在这个id,没有则添加,取消钩子要从数组里删除该权限
let roleid = []
for (let i = 0; i < value.length; i++) {
roleid.push(value[i].id)
}
this.form.permission_id = roleid
console.log(this.form.permission_id)
},
}