element中tab的使用和传参

技术：vue+element ， 来决策el-form表单中的一项展示，进而便于用户选择

项目场景：

一张表格：通过接口获取数据并遍历生成的表格；
一个表单：在另一个界面的表单，需借用表格中的一个属性值；
注意：该两个界面在同一个组件中

问题描述：

问题一：如何从表格中获取该属性值？
问题二：如何将该属性值传入data中？

原因分析：

业务需要：便于用户更好的操作和体验感

解决方案：

记得你在data（）中的一些定义？

data(){
	return {
		table1:[],   //表格中的:data="table1"
		table2:[],
		...
	}
}

可以调用this.table1在要使用的函数或位置

#案例

写法一：
 async submitInstitution(){
        var thorg = this.orgnizationTable
        for(let index in thorg){ var onID = thorg[index].id }
        var f_id = "f_id"
        const params = {
          // headers : { 'Authorization': sessionStorage.token },
          f_id : onID,  //父节点ID
          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)
        })
      },

方法一：图片
方法二：图片
完整代码：

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