技术：vue+element ， 来决策el-form表单中的一项展示，进而便于用户选择
一张表格：通过接口获取数据并遍历生成的表格； 一个表单：在另一个界面的表单，需借用表格中的一个属性值； 注意：该两个界面在同一个组件中
问题一：如何从表格中获取该属性值？ 问题二：如何将该属性值传入data中？
业务需要：便于用户更好的操作和体验感
记得你在data（）中的一些定义？
data(){ return { table1:[], //表格中的:data="table1" table2:[], ... } }可以调用this.table1在要使用的函数或位置
方法一：图片 方法二：图片 完整代码：
<template> <div class="dv"> <el-container> <!-- 地址栏 --> <el-header style="padding:5px;" height="5%"> <my-bread level1='系统管理' level2='组织机构'></my-bread> </el-header> <el-container height="95%" > <!-- 分割线 --> <!-- <el-divider direction="vertical"></el-divider> --> <!-- 组织机构树 --> <el-main width="20%" style="background-color:#F4F4F4"> <div style="width:100%;height:100%;"> <el-row :gutter="15"> <el-col :span="18" class="col"> <!-- 节点信息展示区 --> <div style="background-color:#F5FFFA;height:100%;"> <!-- 对应组织机构树中的个人信息 style="background-color:#FAFAD2;" --> <!-- 本级机构 --> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane name="first"><span slot="label"><i class="el-icon-tickets">本级机构1</i></span> <div> <table border="0" :data="orgnizationTable" v-for="(val,index) in orgnizationTable" :key="index" cellspadding="5" cellspaceing="9" style="background-color:#FFFFFF;margin:20px 20px 20px 20px;height:65vh;"> <tr > <td class="td1">机构简称：</td> <td class="td2" colspan="2">{{ val.label }}</td> <td class="td1">机构全称：</td> <td class="td2" colspan="2">{{ val.label }}</td> </tr> <tr> <td class="td1" style="">机构等级：</td> <td class="td2" colspan="2">{{ val.org_level }}</td> <td class="td1" >机构类型：</td> <td class="td2" colspan="2">{{ val.org_type }}</td> </tr> <tr> <td style="text-indent:1em;margin-top:10px;">机构信息：</td> <td class="td2 gao" colspan="5">{{ val.org_info }}</td> </tr> <tr> <td colspan="6" style="height:50px;"></td> </tr> <tr> <td colspan="6"><el-divider content-position="left">管理员信息</el-divider></td> </tr> <tr> <td class="td1">用户登录名：</td> <td class="td2" colspan="2">{{ val.name }}</td> <td class="td1">用户状态：</td> <td class="td2" colspan="2">--正常--</td> </tr> </table> </div> </el-tab-pane> <!-- 下级机构 --> <el-tab-pane name="second"><span slot="label"><i class="el-icon-tickets">下级机构2</i></span> <el-table border :data="orgnizationTable2" cellspadding="1" cellspaceing="5" style="background-color:#FFFFFF;margin:10px;max-height:70vh;min-height:20vh;"> <el-table-column align="center" type="index" label="序号" width="50"></el-table-column> <el-table-column align="center" label="机构名称" prop="label" width="280"></el-table-column> <el-table-column align="center" label="机构类型" prop="org_type" width=""></el-table-column> <el-table-column align="center" label="机构等级" prop="org_level" width=""></el-table-column> <el-table-column align="center" label="机构信息" prop="org_info" width="400" show-overflow-tooltip></el-table-column> <el-table-column align="center" label="操作" width="190"> <template slot-scope="scope"> <el-button type="warning" plain round size="mini" @click="InstitutionEdit(scope.$index,scope.row)">编辑</el-button> <el-button size="mini" plain round type="danger" @click="InstitutionDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> <div align="right" style="margin-bottom:10px;margin-right:20px;"> <el-button type="primary" size="mini" round plain @click="AddInstitution = true">添加下级机构</el-button> <div> <el-dialog title="添加/编辑下级机构" :visible.sync="AddInstitution" width="30%" > <el-form :model="addInstitutionForm"> <el-form-item align="right" label="下级机构类型" :rules="[{required:true,message:'请选择节点类型(点击右侧触发)',trigger:'blur'}]"> <el-select v-model="addInstitutionForm.value" clearable placeholder="---请选择---" > <el-option v-for="(item,index) in options" :key="index" :value="item" ></el-option> </el-select> <el-button type="" icon="el-icon-more" @click="moni"></el-button> <!-- <el-cascader v-model="value" :options="options" :props="{ expandTrigger:'hover' }" @change="handleChange"></el-cascader> --> </el-form-item> <el-form-item align="right" label="下级机构全称" :rules="[{required:true,message:'请输入机构名称',trigger:'blur,change'}]"> <el-input v-model="addInstitutionForm.institution_name" clearable placeholder="机构全称"></el-input> </el-form-item> <el-form-item align="right" label="下级机构简称" :rules="[{required:true,message:'请输入机构简称',trigger:'blur,change'}]"> <el-input v-model="addInstitutionForm.institution_qname" clearable placeholder="机构简称"></el-input> </el-form-item> <el-form-item align="right" label="机构信息" > <el-input type="textarea" v-model="addInstitutionForm.institution_info" :autosize="{ minRows:2,maxRows:5 }" maxlength="200" show-word-limit placeholder="描述机构信息..."></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="" @click="AddInstitution = false">取消</el-button> <el-button type="primary" @click="submitInstitution()">提交</el-button> </div> </el-dialog> </div> </div> </el-tab-pane> <!-- 员工信息 --> <el-tab-pane name="third"><span slot="label"><i class="el-icon-tickets">员工信息3</i></span> <el-table border :data="orgnizationTable3" cellspadding="1" cellspaceing="5" style="background-color:#FFFFFF;margin:10px;max-height:70vh;min-height:20vh;"> <el-table-column align="center" type="index" label="序号" width="50"></el-table-column> <el-table-column align="center" label="员工编号" prop="user_code"></el-table-column> <el-table-column align="center" label="员工姓名" prop="label"></el-table-column> <el-table-column align="center" label="手机号" prop="phone_num"></el-table-column> <el-table-column align="center" label="邮箱" prop="email"></el-table-column> <el-table-column align="center" label="操作" width="190"> <template slot-scope="scope"> <el-button type="warning" plain round size="mini" @click="RootEdit(scope.$index,scope.row)">编辑</el-button> <el-button size="mini" plain round type="danger" @click="RootDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> <!-- 添加员工 --> <div align="right" style="margin-right:20px;margin-bottom:10px;"> <el-button type="primary" plain round size="mini" @click="addroot = true">添加员工</el-button> <el-dialog title="添加/编辑员工信息" :visible.sync="addroot" width="28%" > <el-form :model="addRootForm"> <el-form-item align="right" label="员工姓名" autocomplete="off"> <el-input v-model="addRootForm.root_name" placeholder="请输入员工的信息"></el-input> </el-form-item> <el-form-item align="right" label="手机号" autocomplete="off"> <el-input v-model="addRootForm.root_phone" placeholder="请输入员工有效的11位手机号"></el-input> </el-form-item> <el-form-item align="right" label="邮箱" autocomplete="off"> <el-input v-model="addRootForm.root_email" placeholder="请输入员工有效的邮箱"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="" @click="addroot = false">取消</el-button> <el-button type="primary" @click="submitRoot()">提交</el-button> </div> </el-dialog> </div> </el-tab-pane> <!-- </el-tabs> --> <!-- 个人信息 --> <!-- <el-tabs> --> <el-tab-pane name="four"><span slot="label"><i class="el-icon-tickets">个人信息4</i></span> <el-table border :data="orgnizationTable4" cellspadding="1" cellspaceing="5" style="background-color:#FFFFFF;margin:10px;min-height:20vh;"> <el-table-column align="center" label="员工编号" prop="user_code"></el-table-column> <el-table-column align="center" label="员工姓名" prop="label"></el-table-column> <el-table-column align="center" label="手机号" prop="phone_num"></el-table-column> <el-table-column align="center" label="邮箱" prop="email"></el-table-column> <el-table-column align="center" label="操作" width="190"> <template slot-scope="scope"> <el-button type="warning" plain round size="mini" @click="RootEdit(scope.$index,scope.row)">编辑</el-button> <el-button size="mini" plain round type="danger" @click="RootDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> </el-tab-pane> </el-tabs> </div> </el-col> <el-col :span="6" class="col2"> <!-- 组织机构树展示区 --> <div style="background-color:#F0FFF0;height:100%;"> <!-- <orgaside ></orgaside> --> <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input> <el-scrollbar class="srcollbar" style=".el-srcollbar__wrap{ overflow-y: hidden;overflow-x: hidden; }"> <el-tree style="background-color:#F0FFF0;" class="filter-tree" :data="dataOrgization" :props="defaultProps" :default-expand-all="deall" auto-expand-parent :expand-on-click-node="showTree" :filter-node-method="filterNode" ref="tree" @node-click="handleBucketClick"></el-tree> </el-scrollbar> </div> </el-col> </el-row> </div> </el-main> </el-container> </el-container> </div> </template> <script> // import orgaside from '../widgets/organization/org_aside' import orgmain from '../widgets/organization/org_main' import orgheader from '../widgets/organization/org_header' import base from '../../base.js' export default { components:{ // orgaside, orgmain, orgheader }, //监听事件 watch: { //模糊查询 filterText(val) { this.$refs.tree.filter(val); } }, created(){ this.getTree(), // this.getMangement() }, methods: { //过滤函数 filterNode(value, data) { if (!value) return true; return data.label.indexOf(value) !== -1; }, //获取、遍历组织机构树 async getTree(){ const params = { headers:{ 'Authorization': sessionStorage.token }, flag:'1', show:'1' } await this.$http.get('api/user/organization/',params).then(res => { //状态码判断 if(res.data.code === 200){ this.$message.success(res.data.msg) // console.log(res.data.resource) this.dataOrgization = res.data.resource //将接口传的数据赋值给data[] } }).catch(err => { this.$message.error(err) }) }, //获取管理员信息 ------------------------------- 数据已接受到，还未展示出 async getMangement(){ const params = { headers:{ 'Authorization': sessionStorage.token } } await this.$http.get('api/user/user/',params).then(res => { // console.log(res.data.name + '000') this.administrator = res.data.name }) }, //节点触发 handleBucketClick(data){ let tableArry = [] let tableArry2 = [] let tableArry3 = [] let tableArry4 = [] /* ----------------组织机构：org_type为6的展示效果 （只展示本级机构、员工信息）------------------------- */ var type = '' // 员工信息 if(data.org_type === 6) { this.orgnizationTable2 = [] // this.orgnizationTable4 = [] tableArry.push(data) // tableArry.push(data.label) // tableArry.push(data.org_type) // tableArry.push(data.org_level) // tableArry.push(data.org_info) // type = data.org_type this.orgnizationTable = tableArry type = data.org_type for(let m in data.children){ tableArry3.push(data.children[m]) } this.orgnizationTable3 = tableArry3 } /* ----------------组织机构：org_type为6的孩子（子节点）的展示效果（只展示个人信息）------------------------- */ else if(data.children.user_code ) { this.orgnizationTable1 = [] this.orgnizationTable2 = [] this.orgnizationTable3 = [] for(let n in data.children){ tableArry4.push(data.children[n]) this.orgnizationTable4 = tableArry4 } }else{ /* ----------------组织机构：org_type不为6的展示效果（只展示本机机构、下级机构）------------------------- */ this.orgnizationTable3 = [] /* 本级机构 */ tableArry.push(data) // tableArry.push(data.label) // tableArry.push(data.org_type) // tableArry.push(data.org_level) // tableArry.push(data.org_info) // type = data.org_type this.orgnizationTable = tableArry type = data.org_type /* 下级机构 */ var type = '' for(let i in data.children) { /* 判断是否含有子节点，有，则对其进行遍历 */ tableArry2.push(data.children[i]) // tableArry2.push(data.children[i].label) // tableArry2.push(data.children[i].org_type) // tableArry2.push(data.children[i].org_level) // tableArry2.push(data.children[i].org_info) // tableArry3.push(data.children[i]) this.orgnizationTable2 = tableArry2 type = data.children[i].org_type } } }, //标签函数 handleClick(tab,event){ // console.log(tab,event) }, /***********下面：员工信息操作事件****************/ //编辑员工信息 RootEdit(index,row){ this.addroot = true this.title = "编辑" this.addRootForm = { label: row.root_name, phone : row.root_phone, email : row.root_email, user_num: row.user_num, } }, //添加员工 async submitRoot(){ const params = { headers:{ 'Authorization': sessionStorage.token }, label:this.addRootForm.root_name, phone:this.addRootForm.root_phone, email:this.addRootForm.root_email, user_num:this.row.user_num, //唯一标识 } await this.$http.post('/api/user/usermanage/',params).then( resp => { console.info(resp.data) if(resp.data.msg === 200){ this.$message.success('添加成功') }else{ this.$message.info('添加失败,请重新添加') } }).catch(err => { this.$message.error(err) }) }, //删除员工 async RootDelete(index,row){ //调用$confirm方法做消息提示 this.$confirm('是否永久性删除该信息？（删除后将无法恢复）','提示',{ confirmButtonText:'确定', cancelButtonText:'取消', type:'warning' }).then(() => { //如果点击确定按钮，调用delete接口，保持前端操作，后端执行，进而删除该数据 const params = { headers: { 'Authorization': sessionStorage.token, } } //通过用户编码来删除该用户的个人数据，这里用户编码做唯一标识 this.$http.delete('/api/user/usermanage/?id=' + row.user_code,params).then(res => { if(res.data.code === 200) { this.$message({ type:'success', message:'删除成功' }) } // rows.splice(index,1) // this.user_code = res.data.user_code //精确删除（依据为用户编号） // if(res.data.code === 200) { // this.$refs.userData // } }) }).catch(() => { this.$message({ type:'info', message:'已取消删除' }) }) }, /***************下面：下级机构操作事件*************** */ //添加下级机构 async submitInstitution(){ var thorg = this.orgnizationTable for(let index in thorg){ var onID = thorg[index].id } // var f_id = "f_id" var f_id = onID const params = { // headers : { 'Authorization': sessionStorage.token }, // f_id : onID, //父节点ID f_if, org_type : this.addInstitutionForm.value, //类型 name : this.addInstitutionForm.institution_name, //全称 org_name : this.addInstitutionForm.institution_qname, //简称 org_info : this.addInstitutionForm.institution_info, } await this.$http.post('api/user/organization/',params).then(res => { if(res.data.code === 200) { this.$message.success( res.data.msg ) } else{ console.log(res.data.msg) this.$message.success( res.data.code + res.data.msg ) } }).catch(err => { this.$message.error(err) console.log(err) }) }, //编辑下级机构 InstitutionEdit(index,row){ this.AddInstitution = true this.title = "编辑" this.addInstitutionForm = { label: row.institution_info, org_info : row.institution_info, // org_level: row.org_level, } }, //删除下级机构 async InstitutionDelete(index,row){ //调用$confirm方法做消息提示 this.$confirm('是否永久性删除该信息？（删除后将无法恢复）','提示',{ confirmButtonText:'确定', cancelButtonText:'取消', type:'warning' }).then(() => { //如果点击确定按钮，调用delete接口，保持前端操作，后端执行，进而删除该数据 const params = { headers: { 'Authorization': sessionStorage.token, } } //通过用户编码来删除该用户的个人数据，这里用户编码做唯一标识 this.$http.delete('api/user/organization/',params).then(res => { if(res.data.code === 200) { this.$message({ type:'success', message:'删除成功' }) } // rows.splice(index,1) // this.user_code = res.data.user_code //精确删除（依据为用户编号） // if(res.data.code === 200) { // this.$refs.userData // } }) }).catch(() => { this.$message({ type:'info', message:'已取消删除' }) }) }, handleChange(value){ }, //触发下级机构类型事件 moni(){ var thorg = this.orgnizationTable for(let index in thorg){ // thorg[index].org_type || thorg[0].org_type 都是获取到的本机机构 var type = thorg[index].org_type // var onID = thorg[index].id } var org_type = "org_type" const params = { headers: { 'Authorization': sessionStorage.token, }, org_type : type, //StrType无法把值赋给org_type } //通过用户编码来删除该用户的个人数据，这里用户编码做唯一标识 this.$http.post('/api/user/org/',params).then(res => { ///触发添加下级机构时，选择下级机构类型的接口api/user/org/ console.log(res.data.data) let datam = res.data.data let arry = [] for(let i in datam) { arry.push(datam[i]) } this.options = arry }).catch(err => { this.$message.error(err) }) } }, data() { return { //组织机构树展示区 filterText: '', // dataOrgization:[], administrator:[], //管理员 addroot:false, //员工弹出框 addRootForm:[], //添加员工表单 // orgtype:this.base.orgtype, //下级机构 AddInstitution: false, addInstitutionForm:{}, //表单data options:[], dataOrgizationList:[], showTree:false, //是否点击节点展开树，false只能点击前面的三角图标展开 deall:false, showBtn:[], showEdit:[], //节点信息展示区 activeName:'frist', orgnizationTable:[], //本机机构 orgnizationTable2:[], //下级机构 orgnizationTable3:[], //员工信息 orgnizationTable4:[], //个人信息 defaultProps: { children: 'children', label: 'label', } }; } } </script> <style lang="less" scoped> .el-container .el-aside { line-height: 260px; } table{ width: 80%; height:90%; } .td1{ width: 100px; height: 50px; text-align: right; background-color: #FCFCFC; } .td2{ width: 260px; height: 50px; background-color:#FAFAFA; } .col{ height: 100%; margin-bottom: 5px; } .gao{ height: 150px; } /* 树增加滚动样式 */ .srcollbar{ height: 78vh; } .srcollbar /deep/ .el-srcollbar__wrap{ overflow-y: hidden;overflow-x: hidden; } </style>