el-tree 获取选中的值

梦里梦外; 2022-11-15 11:28 354阅读 0赞

# this.$refs.tree.getCheckedKeys(); 获取选中的值但未获取到父节点的id,需要用下面的方法 #

#  let checkedData = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());  #

### 当子节点未全部选中时，父节点为半选中状态   将选中的节点数组和半选中的节点数组组合 ###

let tree = this.$refs.tree;
    let array = tree.getCheckedKeys().concat(tree.getHalfCheckedKeys())

<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%">

<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

node-key="routerId"

ref="tree"

:check-strictly="checkStrictly"

highlight-current

:props="defaultProps"

@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: \[\], //菜单

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: \[\],

nodeflag: false

\};

\},

created() \{

this.getRoleList(\{\});

this.getDefaultChecked(this.roleId);

this.getPermissions();

\},

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() \{

this.checkStrictly = false;

this.ckeckedVal = this.$refs.tree.getCheckedKeys();

let number = this.$refs.tree.getHalfCheckedKeys();

this.ckeckedVal = this.ckeckedVal.concat(number);

if (this.ckeckedVal.length > 0) \{

this.ckeckedVal = this.ckeckedVal;

\} else \{

this.ckeckedVal = \[0\];

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

\},

// 获取菜单列表

getPermissions() \{

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

this.data = res.data.data;

\});

\},

// 获取id的权限列表

getPermissionsUser(id) \{

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

this.$refs.tree.setCheckedKeys(\[\]);

let checkedList = \[\];

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

checkedList.push(v.routerId);

\});

checkedList.forEach((i, n) => \{

var node = this.$refs.tree.getNode(i);

if (node.isLeaf) \{

this.$refs.tree.setChecked(node, true);

\});

\},

// 立即提交

handerConfirm() \{

let params = \{

roleId: this.roleId,

routers: this.ckeckedVal

\};

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 获取选中的值

发表评论取消回复

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

相关阅读

相关 Jquery获取radio选中的值

相关 el-tree 获取选中的值

相关 html 获取select选中的文本,JS获取select的选中值和选中文本text

相关获取radio选中的值

相关 js获取select标签选中的值

相关 jquery怎么获取select选中的值，默认选中

相关 jq 获取option 选中的各种值

相关 jquery获取select标签选中的值

相关 jquery 获取easyui combobox选中的值

相关 checkBox 获取选中的值