这个需求，先是其他同事在做。在他的基础上我来改。思路比较混乱。浪费了一天半才解决。
需求：
点击，左边勾选之后。右边的输入框内的值变成30（只针对当前行生效）默认不填的话。值是null
然后我还加了个功能，在点击右边编辑的时候。就选择当前这行。
关键代码：
列表
<!-- 接口授权对话框 -->
<el-dialog customClass="customWidth" title="接口授权" :visible.sync="openPower">
<el-table v-loading="loading" :data="interfaceOptions" @selection-change="handleInterfaceSelectionChange"
@select="handleSelectRow" ref="interfaceTable" @row-click="handleRow"
>
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="名称" align="center" prop="name"/>
<el-table-column label="并发数" align="center" prop="count">
<template slot-scope="scope">
<el-input
placeholder="默认值:30"
v-model="scope.row.count"
@change="getCountData(scope.row)"
style="width: 25%;text-align: center;"
>
</el-input>
</template>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitInterface">确 定</el-button>
<el-button @click="cancelInterface">取 消</el-button>
</div>
</el-dialog>data参考下面的完整代码
方法：
handleInterfaceSelectionChange(selection) {
console.log(selection)
this.newOptions = selection
this.intSingle = selection.length === 1
this.intMultiple = selection.length > 1
},
handleSelectRow(selection, row) {
console.log(selection)
this.newSelection = selection
if (row.count === null) {
row.count = 30
}
},
handleRow(row) {
// console.log(row)
// console.log(row.count)
if (row.count === null) {
row.count = 30
}
const selection = this.$refs.interfaceTable.selection
const idArr = selection.map(item => item.__ob__.dep.id)
const idIndex = idArr.indexOf(row.__ob__.dep.id)
if (idIndex < 0) {
this.$refs.interfaceTable.selection.push(row)
} else {
// selection.splice(idIndex,1)//点击去掉当前行
}
console.log(selection)
console.log(this.$refs.interfaceTable.selection)
this.newOptions = selection
},
完整代码：
<template>
<div class="app-container">
<el-row :gutter="20">
<!--部门数据-->
<!-- <el-col :span="4" :xs="24">
<div class="head-container">
<el-input
v-model="deptName"
placeholder="请输入部门名称"
clearable
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/>
</div>
<div class="head-container">
<el-tree
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
default-expand-all
@node-click="handleNodeClick"
/>
</div>
</el-col> -->
<!--用户数据-->
<el-col :span="24" :xs="24">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="用户名称" prop="userName">
<el-input
v-model="queryParams.userName"
placeholder="请输入用户名称"
clearable
size="small"
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<el-input
v-model="queryParams.phonenumber"
placeholder="请输入手机号码"
clearable
size="small"
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="用户状态"
clearable
size="small"
style="width: 240px"
>
<el-option
v-for="dict in statusOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="dateRange"
size="small"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:user:add']"
>新增
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:user:edit']"
>修改
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:user:remove']"
>删除
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="info"
icon="el-icon-upload2"
size="mini"
@click="handleImport"
v-hasPermi="['system:user:import']"
>导入
</el-button>
</el-col>
<!-- <el-col :span="1.5">
<el-button
type="warning"
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:user:export']"
>导出
</el-button>
</el-col> -->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center"/>
<el-table-column label="用户编号" align="center" prop="userId" width="120"/>
<el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" width="140"/>
<el-table-column label="用户昵称" align="center" prop="nickName" :show-overflow-tooltip="true" width="140"/>
<!-- <el-table-column label="部门" align="center" prop="dept.deptName" :show-overflow-tooltip="true"/> -->
<el-table-column label="接口权限" align="center" prop="interfaceName" :show-overflow-tooltip="true" width="180"/>
<el-table-column label="手机号码" align="center" prop="phonenumber" width="160"/>
<el-table-column label="状态" align="center" width="80">
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
active-value="0"
inactive-value="1"
@change="handleStatusChange(scope.row)"
></el-switch>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="160">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
width="500"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
type="success"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:user:edit']"
>修改
</el-button>
<el-button
size="mini"
type="primary"
@click="handlePower(scope.row)"
v-hasPermi="['system:user:edit']"
>接口授权
</el-button>
<el-button
v-if="scope.row.userId !== 1"
size="mini"
type="danger"
@click="handleDelete(scope.row)"
v-hasPermi="['system:user:remove']"
>删除
</el-button>
<el-button
size="mini"
type="warning"
@click="handleResetPwd(scope.row)"
v-hasPermi="['system:user:resetPwd']"
>修改密码
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-col>
</el-row>
<!-- 添加或修改参数配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="用户昵称" prop="nickName">
<el-input v-model="form.nickName" placeholder="请输入用户昵称"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="用户性别">
<el-select v-model="form.sex" placeholder="请选择">
<el-option
v-for="dict in sexOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
></el-option>
</el-select>
</el-form-item>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="归属部门" prop="deptId">
<treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门"/>
</el-form-item>
</el-col> -->
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="手机号码" prop="phonenumber">
<el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
<el-input v-model="form.userName" placeholder="请输入用户名称"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
<el-input v-model="form.password" placeholder="请输入用户密码" type="password" show-password/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in statusOptions"
:key="dict.dictValue"
:label="dict.dictValue"
>{{ dict.dictLabel }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<!-- <el-row>
<el-col :span="12">
<el-form-item label="岗位">
<el-select v-model="form.postIds" multiple placeholder="请选择">
<el-option
v-for="item in postOptions"
:key="item.postId"
:label="item.postName"
:value="item.postId"
:disabled="item.status == 1"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="角色">
<el-select v-model="form.roleIds" multiple placeholder="请选择">
<el-option
v-for="item in roleOptions"
:key="item.roleId"
:label="item.roleName"
:value="item.roleId"
:disabled="item.status == 1"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row> -->
<!--新增菜单权限-->
<!-- <el-row>
<el-form-item label="菜单权限">
<el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
<el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
<el-tree
class="tree-border"
:data="menuOptions"
show-checkbox
ref="menu"
node-key="id"
:check-strictly="false"
empty-text="加载中，请稍后"
:props="defaultProps"
></el-tree>
</el-form-item>
</el-row> -->
<el-row>
<el-col :span="24">
<el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 接口授权对话框 -->
<el-dialog customClass="customWidth" title="接口授权" :visible.sync="openPower">
<el-table v-loading="loading" :data="interfaceOptions" @selection-change="handleInterfaceSelectionChange"
@select="handleSelectRow" ref="interfaceTable" @row-click="handleRow"
>
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="名称" align="center" prop="name"/>
<el-table-column label="并发数" align="center" prop="count">
<template slot-scope="scope">
<el-input
placeholder="默认值:30"
v-model="scope.row.count"
@change="getCountData(scope.row)"
style="width: 25%;text-align: center;"
>
</el-input>
</template>
</el-table-column>
</el-table>
<!-- <div id="interfaceGroup">
<el-form v-for="(item,index) in this.interfaceOptions" :key="index" label-width="80px">
<el-checkbox><el-input :value=item.id type="hidden" /><span>{{item.name}}</span></el-checkbox>
</el-form>
</div> -->
<!-- <div v-for="item in this.interfaceOptions" :key="item.code" class="interfaceGroup">
<el-checkbox><input :value=item.code type="hidden" /><span>{{item.name}}</span><div style="text-align: right">50</div></el-checkbox>
</div> -->
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitInterface">确 定</el-button>
<el-button @click="cancelInterface">取 消</el-button>
</div>
</el-dialog>
<!-- 用户导入对话框 -->
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或
<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">
<el-checkbox v-model="upload.updateSupport"/>
是否更新已经存在的用户数据
<el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
</div>
<div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
<!-- 分配角色数据权限对话框 -->
<el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body>
<el-form :model="form" label-width="80px">
<el-form-item label="用户名称">
<el-input v-model="form.userName" :disabled="true"/>
</el-form-item>
<!-- <el-form-item label="权限范围">
<el-select v-model="form.dataScope">
<el-option
v-for="item in dataScopeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item> -->
<el-form-item label="数据权限">
<el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
<el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
<!-- <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox> -->
<el-tree
class="tree-border"
:data="deptOptions"
show-checkbox
default-expand-all
ref="dept"
node-key="id"
:check-strictly="false"
empty-text="加载中，请稍后"
:props="defaultProps"
></el-tree>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitDataScope">确 定</el-button>
<el-button @click="cancelDataScope">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listUser,
getUser,
delUser,
addUser,
updateUser,
exportUser,
resetUserPwd,
changeUserStatus,
importTemplate,
dataScope,
listInterfaces,
listInterfacesSel,
updateUserInterface,
listSelectedInterfaces
} from '@/api/web/interfacesUser'
import { getToken } from '@/utils/auth'
import { userDeptTreeselect, treeselect } from '@/api/system/dept'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getRole } from '@/api/system/role'
import { userMenuTreeselect, treeselect as menuTreeselect } from '@/api/system/menu'
import store from '@/store'
import { Message } from 'element-ui'
export default {
name: 'User',
components: { Treeselect },
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 选中数组
intIds: [],
// 选中并发数数组里的所有count值
bfintIds: [],
// 非单个禁用
intSingle: true,
// 非多个禁用
intMultiple: true,
interfaceUserId: null,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 用户表格数据
userList: null,
// 弹出层标题
title: '',
// 部门树选项
deptOptions: undefined,
// 是否显示弹出层
open: false,
// 是否显示弹出层（数据权限）
openDataScope: false,
// 是否显示弹出层（接口授权）
openPower: false,
// 接口选项
interfaceOptions: null,
newOptions: null,//所有选中的新id和counts
newSelection: null,//所有选中的新数组
deptExpand: true,
deptNodeAll: false,
// 部门名称
deptName: undefined,
// 默认密码
initPassword: undefined,
// 日期范围
dateRange: [],
// 状态数据字典
statusOptions: [],
// 性别状态字典
sexOptions: [],
// 岗位选项
postOptions: [],
// 角色选项
roleOptions: [],
//菜单权限
menuExpand: false,
menuNodeAll: false,
// 菜单列表
menuOptions: [],
// 表单参数
form: {},
defaultProps: {
children: 'children',
label: 'label'
},
// 数据范围选项
dataScopeOptions: [
{
value: '1',
label: '全部数据权限'
},
{
value: '2',
label: '自定数据权限'
},
{
value: '3',
label: '本部门数据权限'
},
{
value: '4',
label: '本部门及以下数据权限'
},
{
value: '5',
label: '仅本人数据权限'
}
],
// 用户导入参数
upload: {
// 是否显示弹出层（用户导入）
open: false,
// 弹出层标题（用户导入）
title: '',
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: 'Bearer ' + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + '/system/user/importData'
},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
userName: undefined,
phonenumber: undefined,
status: undefined,
deptId: undefined,
userType: '01'
},
// 表单校验
rules: {
userName: [
{ required: true, message: '用户名称不能为空', trigger: 'blur' }
],
nickName: [
{ required: true, message: '用户昵称不能为空', trigger: 'blur' }
],
// deptId: [
// {required: true, message: "归属部门不能为空", trigger: "change"}
// ],
password: [
{ required: true, message: '用户密码不能为空', trigger: 'blur' }
],
email: [
{ required: true, message: '邮箱地址不能为空', trigger: 'blur' },
{
type: 'email',
message: '\'请输入正确的邮箱地址',
trigger: ['blur', 'change']
}
],
phonenumber: [
{ required: true, message: '手机号码不能为空', trigger: 'blur' },
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: '请输入正确的手机号码',
trigger: 'blur'
}
]
}
}
},
watch: {
// 根据名称筛选部门树
deptName(val) {
this.$refs.tree.filter(val)
}
},
created() {
this.getList()
this.getTreeselect()
this.getDicts('sys_normal_disable').then(response => {
this.statusOptions = response.data
})
this.getDicts('sys_user_sex').then(response => {
this.sexOptions = response.data
})
this.getConfigKey('sys.user.initPassword').then(response => {
this.initPassword = response.msg
})
},
methods: {
/** 查询用户列表 */
getList() {
this.loading = true
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.userList = response.rows
this.total = response.total
this.loading = false
}
)
},
/** 查询部门下拉树结构 */
getTreeselect() {
treeselect().then(response => {
this.deptOptions = response.data
})
},
// 筛选节点
filterNode(value, data) {
if (!value) return true
console.log(data)
return data.label.indexOf(value) !== -1
},
// 节点单击事件
handleNodeClick(data) {
this.queryParams.deptId = data.id
this.getList()
},
// 用户状态修改
handleStatusChange(row) {
let text = row.status === '0' ? '启用' : '停用'
this.$confirm('确认要"' + text + '""' + row.userName + '"用户吗?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function() {
return changeUserStatus(row.userId, row.status)
}).then(() => {
this.msgSuccess(text + '成功')
}).catch(function() {
row.status = row.status === '0' ? '1' : '0'
})
},
// 取消按钮
cancel() {
this.open = false
this.reset()
},
// 取消按钮
cancelInterface() {
this.openPower = false
this.reset()
},
// 表单重置
reset() {
this.menuExpand = false,
this.menuNodeAll = false,
this.form = {
userId: undefined,
deptId: undefined,
userName: undefined,
nickName: undefined,
password: undefined,
phonenumber: undefined,
email: undefined,
sex: undefined,
status: '0',
remark: undefined,
postIds: [],
roleIds: [],
menuCheckStrictly: true,
deptCheckStrictly: true
}
this.resetForm('form')
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.page = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = []
this.resetForm('queryForm')
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.userId)
this.single = selection.length = 1
this.multiple = selection.length > 1
},
handleSelectRow(selection, row) {
console.log(selection)
this.newSelection = selection
if (row.count === null) {
row.count = 30
}
},
handleInterfaceSelectionChange(selection) {
console.log(selection)
this.newOptions = selection
this.intSingle = selection.length === 1
this.intMultiple = selection.length > 1
},
handleRow(row) {
// console.log(row)
// console.log(row.count)
if (row.count === null) {
row.count = 30
}
const selection = this.$refs.interfaceTable.selection
const idArr = selection.map(item => item.__ob__.dep.id)
const idIndex = idArr.indexOf(row.__ob__.dep.id)
if (idIndex < 0) {
this.$refs.interfaceTable.selection.push(row)
} else {
// selection.splice(idIndex,1)//点击去掉当前行
}
console.log(selection)
console.log(this.$refs.interfaceTable.selection)
this.newOptions = selection
},
getCountData(row) {
console.log(row.id)
console.log(row.count)
let arr = this.bfintIds
console.log(this.bfintIds.length)
console.log(this.bfintIds)
// this.$nextTick(() => {
// this.show = false
// })
for (let item in arr) { // item遍历数组时为数组的下标，遍历对象时为对象的key值
// console.log(item) // 0, 1, 2
// console.log(arr[item].id) // 0, 1, 2
if (arr[item].id === row.id) {
arr[item].count = row.count
}
}
},
compare(property) {
return function(obj1, obj2) {
var value1 = obj1[property]
var value2 = obj2[property]
return value1 - value2 // 升序
}
},
/** 新增按钮操作 */
handleAdd() {
this.reset()
// this.getTreeselect();
// this.getMenuTreeselect();
getUser().then(response => {
this.postOptions = response.posts
// this.roleOptions = response.roles;
this.open = true
this.title = '添加用户'
this.form.password = this.initPassword
})
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
this.getTreeselect()
const userId = row.userId || this.ids
const userMenu = this.getUserMenuTreeselect(userId)
getUser(userId).then(response => {
this.form = response.data
this.postOptions = response.posts
this.roleOptions = response.roles
this.form.postIds = response.postIds
this.form.roleIds = response.roleIds
this.open = true
this.$nextTick(() => {
userMenu.then(res => {
this.$refs.menu.setCheckedKeys(res.checkedKeys)
})
})
this.title = '修改用户'
this.form.password = ''
})
},
/** 接口授权按钮操作 */
handlePower(row) {
this.interfaceUserId = row.userId
listInterfacesSel({ userId: row.userId }).then(response => {
// console.log(response.rows)
// console.log(typeof response.rows)
this.interfaceOptions = response.rows
listSelectedInterfaces(row.userId).then(responseInt => {
for (let i = 0; i < response.rows.length; i++) {
for (let j = 0; j < responseInt.data.length; j++) {
if (response.rows[i].id == responseInt.data[j]) {
this.$refs.interfaceTable.toggleRowSelection(response.rows[i])
break
}
}
}
// for(let i=0; i<responseInt.data.length; i++){
// this.$refs.interfaceTable.toggleRowSelection(responseInt.rows[i]);
// }
// this.$refs.interfaceTable.toggleRowSelection(response.rows[1])
})
})
this.openPower = true
},
/** 分配数据权限操作 */
handleDataScope(row) {
this.reset()
const userDeptTreeselect = this.getUserDeptTreeselect(row.userId)
getUser(row.userId).then(response => {
console.log('res:')
console.log(response)
this.form = response.data
this.openDataScope = true
this.$nextTick(() => {
userDeptTreeselect.then(res => {
this.$refs.dept.setCheckedKeys(res.checkedKeys)
})
})
this.title = '分配数据权限'
})
},
// 树权限（展开/折叠）
handleCheckedTreeExpand(value, type) {
if (type == 'menu') {
let treeList = this.menuOptions
for (let i = 0; i < treeList.length; i++) {
this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value
}
} else if (type == 'dept') {
let treeList = this.deptOptions
for (let i = 0; i < treeList.length; i++) {
this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value
}
}
},
// 树权限（全选/全不选）
handleCheckedTreeNodeAll(value, type) {
if (type == 'menu') {
this.$refs.menu.setCheckedNodes(value ? this.menuOptions : [])
} else if (type == 'dept') {
this.$refs.dept.setCheckedNodes(value ? this.deptOptions : [])
}
},
// 树权限（父子联动）
// handleCheckedTreeConnect(value, type) {
// if (type == 'menu') {
// this.form.menuCheckStrictly = value ? true: false;
// } else if (type == 'dept') {
// this.form.deptCheckStrictly = value ? true: false;
// }
// },
/** 根据用户ID查询菜单树结构 */
getUserMenuTreeselect(userId) {
return userMenuTreeselect(userId).then(response => {
this.menuOptions = response.menus
return response
})
},
/** 根据用户ID查询部门树结构 */
getUserDeptTreeselect(userId) {
return userDeptTreeselect(userId).then(response => {
this.deptOptions = response.depts
return response
})
},
/** 查询菜单树结构 */
getMenuTreeselect() {
menuTreeselect().then(response => {
this.menuOptions = response.data
})
},
/** 重置密码按钮操作 */
handleResetPwd(row) {
this.$prompt('请输入"' + row.userName + '"的新密码', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(({ value }) => {
resetUserPwd(row.userId, value).then(response => {
this.msgSuccess('修改成功，新密码是：' + value)
})
}).catch(() => {
})
},
/** 提交按钮 */
submitForm: function() {
this.$refs['form'].validate(valid => {
if (valid) {
if (this.form.userId != undefined) {
updateUser(this.form).then(response => {
this.msgSuccess('修改成功')
this.open = false
this.getList()
})
} else {
this.form.userType = '01'
addUser(this.form).then(response => {
this.msgSuccess('新增成功')
this.open = false
this.getList()
})
}
}
})
},
/** 提交按钮（接口授权） */
submitInterface(row) {
console.log(this.newOptions)
let selectArr = this.newOptions
let sortObj = []
if (selectArr.length > 0) {
// 按照id排序
sortObj = selectArr.sort(this.compare('id'))
console.log(sortObj) //
this.bfintIds = sortObj.map(item => item.count)
this.intIds = sortObj.map(item => item.id)
}
//需要提交的3个参数
const interfaceUserId = this.interfaceUserId
const interfaceIds = row.intId || this.intIds
const counts = row.count || this.bfintIds
this.$confirm('是否确认修改用户编号为"' + interfaceUserId + '"的接口权限?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function() {
return updateUserInterface(interfaceUserId, interfaceIds.join(','), counts.join(','))
}).then(() => {
this.msgSuccess('修改成功')
this.openPower = false
this.getList()
}).catch(err => {
console.log(err)
})
},
/** 提交按钮（数据权限） */
submitDataScope: function() {
if (this.form.userId != undefined) {
dataScope(this.form).then(response => {
this.msgSuccess('修改成功')
this.openDataScope = false
this.getList()
})
}
},
// 取消按钮（数据权限）
cancelDataScope() {
this.openDataScope = false
this.reset()
},
/** 删除按钮操作 */
handleDelete(row) {
const userIds = row.userId || this.ids
this.$confirm('是否确认删除用户编号为"' + userIds + '"的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function() {
return delUser(userIds)
}).then(() => {
this.getList()
this.msgSuccess('删除成功')
})
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams
this.$confirm('是否确认导出所有用户数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function() {
return exportUser(queryParams)
}).then(response => {
this.download(response.msg)
})
},
/** 导入按钮操作 */
handleImport() {
this.upload.title = '用户导入'
this.upload.open = true
},
/** 下载模板操作 */
importTemplate() {
importTemplate().then(response => {
this.download(response.msg)
})
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.open = false
this.upload.isUploading = false
this.$refs.upload.clearFiles()
this.$alert(response.msg, '导入结果', { dangerouslyUseHTMLString: true })
this.getList()
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit()
}
}
}
</script>
<style>
.customWidth {
width: 60%;
height: 70%;
}
</style>
如图：
el-table的row-click时间会返回row，
再调用table内部的toggleRowSelection方法可实现
el-table 本身选中某行就会有选中样式，row-click会返回当前行数据
参考：
扫一扫
884
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
