el-tree 选中与绑定

小鱼儿 2022-11-13 10:24 50阅读 0赞

<div class="content\_bg">

<div class="content">

<el-form :inline="true" :model="formInline" class="demo-form-inline">

<el-form-item label="角色名：">

<el-input v-model="formInline.user" placeholder="角色名"></el-input>

</el-form-item>

<el-form-item>

<el-button type="primary" icon="el-icon-search" @click="handerSearch">搜索</el-button>

</el-form-item>

<el-form-item style="float: right">

<el-button type="primary" icon="el-icon-circle-plus-outline" @click="handerAdd">添加</el-button>

</el-form-item>

</el-form>

<el-table :data="tableData" border style="width: 100%" row-key="id">

<el-table-column prop="code" label="code" align="center"> </el-table-column>

<el-table-column prop="name" label="角色名" align="center"> </el-table-column>

<el-table-column prop="updateTime" label="修改时间" align="center"> </el-table-column>

<el-table-column fixed="right" label="操作" width="300" align="center">

<template slot-scope="scope">

<el-button @click="handleEdit(scope.row)" type="primary" size="small"><i class="el-icon-edit"></i></el-button>

<el-button @click="handleDelete(scope.row)" type="primary" size="small"><i class="el-icon-delete"></i></el-button>

<el-button type="primary" size="small" @click="handerRole(scope.row)">分配菜单</el-button>

</template>

</el-table-column>

</el-table>

<div style="margin-top: 30px; float: right">

<el-pagination

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

:current-page="pageNum"

:page-sizes="\[10, 20, 30, 40\]"

:page-size="pageSize"

layout="total, sizes, prev, pager, next, jumper"

:total="total"

</el-pagination>

</div>

<el-dialog :title="flagName ? '添加' : '编辑'" :visible.sync="centerDialogVisible" width="50%" center>

<el-form label-position="top" label-width="80px" :model="formLabelAlign">

<el-form-item label="code(不能修改)" v-if="flagName">

<el-input v-model="formLabelAlign.code"></el-input>

</el-form-item>

<el-form-item label="code" v-else>

<el-input v-model="formLabelAlign.code" disabled></el-input>

</el-form-item>

<el-form-item label="角色">

<el-input v-model="formLabelAlign.name"></el-input>

</el-form-item>

</el-form>

<span slot="footer" class="dialog-footer">

<el-button @click="centerDialogVisible = false">返回</el-button>

<el-button type="primary" @click="handerAddSave" v-if="flagName">保存</el-button>

<el-button type="primary" @click="handerEditSave" v-else>保存</el-button>

</span>

</el-dialog>

<el-dialog title="分配菜单" :visible.sync="centerDialogVisibleRole" width="60%">

<div style="margin: 15px 0"></div>

<el-tree

:data="data"

show-checkbox

:expand-on-click-node="false"

node-key="routerId"

ref="tree"

:check-strictly="checkStrictly"

highlight-current

:props="defaultProps"

:default-checked-keys="checkedList"

@check="clickDeal"

<span class="custom-tree-node" slot-scope="\{ data \}">

</span>

</el-tree>

<span slot="footer" class="dialog-footer">

<el-button @click="centerDialogVisibleRole = false">取 消</el-button>

<el-button type="primary" @click="handerConfirm">立即提交</el-button>

</span>

</el-dialog>

</div>

</template>

import \{ getRole, getRoleEdit, getRoleAdd, getRoleDelete \} from '@/api/index';

import \{ postPermissions, getPermissions, getRoutersByRole, getRouterList, postRouterToRole, getRouterTree \} from '@/api/subsystem';

const cityOptions = \[\];

export default \{

data() \{

return \{

data: \[\], //菜单

checkedList: \[\],

checkStrictly: false,

defaultProps: \{

children: 'children',

label: 'label'

\},

pageNum: 1,

pageSize: 10,

total: 0,

roleId: null,

formInline: \{

user: ''

\},

flagName: false,

centerDialogVisible: false,

centerDialogVisibleRole: false,

formLabelAlign: \{

name: '',

code: ''

\},

checkAll: false,

checkedCities: \[\],

cities: cityOptions,

isIndeterminate: true,

tableData: \[\],

ckeckedVal: \[\]

\};

\},

created() \{

this.getRoleList(\{\});

this.getDefaultChecked(this.roleId);

\},

methods: \{

handleSizeChange(val) \{

// console.log(\`每页 $\{val\} 条\`);

this.pageSize = val;

this.getRoleList();

\},

handleCurrentChange(val) \{

// console.log(\`当前页: $\{val\}\`);

this.pageNum = val;

this.getRoleList();

\},

// 查询

getRoleList() \{

let params = \{

pageNum: this.pageNum,

pageSize: this.pageSize,

name: this.formInline.user

\};

getRole(params).then((res) => \{

if (res.status == 200) \{

this.tableData = res.data.data.list;

this.total = res.data.data.total;

this.pageNum = res.data.data.pageNum;

this.pageSize = res.data.data.pageSize;

\});

\},

// 搜索

handerSearch() \{

this.getRoleList(this.formInline.name);

\},

// 添加

handerAdd() \{

this.formLabelAlign = \{\};

this.flagName = true;

this.centerDialogVisible = true;

\},

// 分配菜单

handerRole(row) \{

this.roleId = row.id;

this.getPermissions();

this.centerDialogVisibleRole = true;

this.getPermissionsUser(row.id);

\},

// 获取el\_tree 选中节点

clickDeal(val) \{

this.ckeckedVal = this.checkedList;

if (val.children && val.children.length > 0) \{

val.children.forEach((v) => \{

this.ckeckedVal.push(v.routerId);

\});

\} else \{

this.ckeckedVal.push(val.routerId);

// console.log(3636, this.ckeckedVal);

\},

// 获取菜单列表

getPermissions() \{

getRouterTree().then((res) => \{

this.data = res.data.data;

\});

\},

// 获取id的权限列表

getPermissionsUser(id) \{

this.data = \[\];

getRoutersByRole(\{ roleId: id \}).then((res) => \{

this.checkedList = \[\];

res.data.data.forEach((v) => \{

this.checkedList.push(v.routerId);

\});

\},

// 立即提交

handerConfirm() \{

let params = \{

roleId: this.roleId,

routers: this.ckeckedVal.map(String)

\};

postRouterToRole(params).then((res) => \{

// console.log('9898==', params, res);

if (res) \{

this.centerDialogVisibleRole = false;

this.$message.success('分配成功');

\});

\},

// 编辑

handleEdit(row) \{

this.flagName = false;

this.centerDialogVisible = true;

this.formLabelAlign = row;

\},

// 添加保存

handerAddSave() \{

getRoleAdd(this.formLabelAlign).then((res) => \{

if (res.status == 200) \{

this.centerDialogVisible = false;

this.getRoleList();

this.$message.success('添加成功');

\});

\},

// 编辑保存

handerEditSave() \{

getRoleEdit(this.formLabelAlign).then((res) => \{

if (res.status == 200) \{

this.centerDialogVisible = false;

this.getRoleList();

this.$message.success('修改成功');

\});

\},

handleDelete(row) \{

this.$confirm('确定要删除吗?', '信息', \{

confirmButtonText: '确定',

cancelButtonText: '取消',

type: 'warning'

\})

.then(() => \{

getRoleDelete(row.id).then((res) => \{

this.getRoleList();

this.$message(\{

type: 'success',

message: '删除成功!'

\});

\})

.catch(() => \{

this.$message(\{

type: 'info',

message: '已取消删除'

\});

\},

getDefaultChecked(roleId) \{\}

\};

</script>

el-tree 选中与绑定

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关轻松理解java前期绑定（静态绑定）与后期绑定（动态绑定）的区别。

相关 el-tree 选中与绑定

相关静态绑定、动态绑定

相关 knockout select绑定，选中默认值

相关 c++的动态绑定与静态绑定

相关 C++ — 静态绑定与动态绑定

相关 Vue绑定属性绑定Class 绑定style

相关 element-ui，radio组件动态绑定选中项

相关绑定方法与非绑定方法

相关 click的绑定与解绑