下拉表(主从表)详细(两张表查询简单实现) 实现图 后台自己写

代码实现

前端:

<template>
<div>
<el-form ref="form" :model="form" label-width="100px" inline>
  <el-form-item label="名字">
    <el-input v-model="name" style="width: 200px;" size="mini"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button @click="queryByName" type="primary" size="mini" icon="el-icon-search">搜索</el-button>
    <el-button @click="add" size="mini" type="primary">添加<i class="el-icon-upload el-icon--right"></i></el-button>
  </el-form-item>
</el-form>
<el-table v-loading="loading" @expand-change="rowExpand" :data="tableData" border style="width: 100%;margin-bottom: 20px;"
  height="300">
  <el-table-column type="expand" prop="">
    <template slot-scope="">
      <el-table :data="orderDetailData">
        <el-table-column prop="develop" label="职位" width="244" />
        <el-table-column prop="salary" label="薪水" width="244" />
        <el-table-column prop="yearsWorking" label="工作年限" width="244" />
        <el-table-column prop="edit" label="编辑" width="244" />
        <el-table-column prop="view" label="视图" width="230">
          <el-switch v-model="value" active-color="#13ce66" inactive-color="#13ce66">
          </el-switch>
        </el-table-column>
      </el-table>
    </template>
  </el-table-column>
  <el-table-column prop="id" label="ID" width="150" v-if="false">
  </el-table-column>
  <el-table-column prop="demoName" label="姓名">
  </el-table-column>
  <el-table-column prop="age" label="年龄">
  </el-table-column>
  <el-table-column prop="address" label="地址">
  </el-table-column>
  <el-table-column prop="supplierTel" label="操作">
    <template slot-scope="scope">
      <span>
        <el-button type="primary" @click="handleEdit(scope.row)" size="small">编辑</el-button>
        <el-button type="danger" @click="handleDeleteFile(scope.row)" size="small" plain>删除</el-button>
      </span>
    </template>
  </el-table-column>
  <el-table-column prop="view" label="视图">
    <el-switch v-model="value" active-color="#13ce66" inactive-color="#13ce66">
    </el-switch>
  </el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
  :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalRows">
</el-pagination>
<!--新增弹窗-->
<el-dialog title="编辑信息" :visible.sync="dialogVisible" width="30%">
  <el-form ref="form" :model="form" label-width="100px">
    <el-form-item label="姓名">
      <el-input v-model="form.demoName" style="width: 200px;"></el-input>
    </el-form-item>
    <el-form-item label="年龄">
      <el-input v-model="form.age" style="width: 200px;"></el-input>
    </el-form-item>
    <el-form-item label="地址">
      <el-input v-model="form.address" style="width: 200px;"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSave()">保存</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </el-form-item>
  </el-form>
</el-dialog>
<!-- <el-table-column type="expand" prop="">
  <template slot-scope="">
    <el-table :data="tableDataT" border style="width: 100%;margin-bottom: 20px;" height="300">
      <el-table-column prop="id" label="ID" width="150" v-if="false">
      </el-table-column>
      <el-table-column prop="develop" label="职位">
      </el-table-column>
      <el-table-column prop="salary" label="薪水">
      </el-table-column>
      <el-table-column prop="yearsWorking" label="工作年限">
      </el-table-column>
      <el-table-column prop="viewT" label="视图">
        <el-switch v-model="valueT" active-color="#13ce66" inactive-color="#ff4949">
        </el-switch>
      </el-table-column>
    </el-table>
  </template>
</el-table-column> -->
</div>
</template>

<script>
import axios from '@/axios';
export default {
data() {
  return {
    form: {
      id: '',
      demoName: '',
      age: '',
      address: '',
    },
    orderDetailData: [{
      develop : '',
      salary : '',
      yearsWorking : ''
    }],
    tableData: [],
    currentPage: 1,
    totalRows: 0,
    pageSizes: [10, 20, 30, 40],
    pageSize: 10,

    dialogVisible: false,
    name: '',
  }
},
mounted() {
  this.getDetailedByRequireNo();
},
methods: {
  // 行展开实现
  rowExpand(row, expandeRows) {
    console.log('点开了' + row.demoClass)
    var url = 'TWangZhaoHuiDemo/selectClass.do'
    var parm = {
      demoClass: row.demoClass
    }
    axios.get(url, parm).then(response => {
      if (response.data.code == '0') {
        this.orderDetailData = response.data.data
        console.log(response.data.data)
        // console.log(response.data.data.list)
        // console.log(response.data.list)



        // // this.orderDetailData.develop=response.data.data.develop
        // // this.orderDetailData = response.data.data.salary
        // // this.orderDetailData = response.data.data.yearsWorking
        // console.log(this.orderDetailData)
        // console.log(response.data.data.develop)
        // console.log(response.data.data.develop)
        // console.log(response.data.data.salary)
        // console.log(response.data.data.yearsWorking)
      } else {
        this.$message({
          type: 'error',
          message: '操作失败!' + response.data.msg
        });
      }

    })
  },

  //页面加载全部
  getDetailedByRequireNo() {
    var url = 'TWangZhaoHuiDemo/findAll.do'
    var param = {
      page: this.currentPage,
      rows: this.pageSize,
    }
    axios.get(url, param).then(response => {
      if (response.data.code == '0') {
        this.tableData = response.data.data.list
        console.log(response.data.data.list)
        this.totalRows = response.data.data.total
      } else {
        this.$message({
          type: 'error',
          message: '操作失败!' + response.data.msg
        });
      }
    });
  },
  //新增弹窗11
  add() {
    this.dialogVisible = true
    this.queryPrimaryKey()
  },
  //获取主键ID
  queryPrimaryKey() {
    var url = 'Common/queryPrimaryKey.do'
    var param = {}
    axios.get(url, param).then(response => {
      if (response.data.code == '0') {
        this.form.id = response.data.data //设置主键ID进行保存
      } else {
        this.$message({
          type: 'error',
          message: '查询失败' + response.data.msg
        });
      }
    });
  },
  //保存按钮
  handleSave() {
    var url = 'TWangZhaoHuiDemo/save.do'
    var param = {
      json: JSON.stringify(this.form)
    }
    axios.post(url, param).then(response => {
      if (response.data.code == '0') {
        this.$message({
          type: 'success',
          message: '保存成功!',
        });
        this.form = {
          id: '',
          demoName: '',
          age: '',
          adrress: '',
        }
        this.dialogVisible = false
        this.getDetailedByRequireNo()
      } else {
        this.$message({
          type: 'error',
          message: '保存失败!' + response.data.msg
        });
      }
    });
  },
  //编辑按钮，点击显示编辑页面
  handleEdit(row) {
    this.dialogVisible = true //显示内容
    this.form = row
  },
  //删除
  handleDeleteFile(row) {
    this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      var url = 'TWangZhaoHuiDemo/remove.do'
      var param = {
        id: row.id
      }
      axios.post(url, param).then(response => {
        if (response.data.code == '0') {
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
          this.getDetailedByRequireNo()
        } else {
          this.$message({
            type: 'error',
            message: '删除失败!' + response.data.msg
          });
        }
      });
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消删除'
      });
    });
  },
  //查询功能
  queryByName() {
    var url = 'TWangZhaoHuiDemo/queryByName.do'
    var param = {
      name: this.name,
    }
    axios.get(url, param).then(response => {
      if (response.data.code == '0') {
        console.log("111111111111111111111")
        console.log(response.data.data)
        this.tableData = response.data.data
      } else {
        this.$message({
          type: 'error',
          message: '操作失败!' + response.data.msg
        });
      }
    });
  },


  onSupplier() {
    this.dialogVisibleSupplier = true
    this.getDetailedByRequireNoSupplier()
  },
  getDetailedByRequireNoSupplier() {
    var url = 'InformationSupplier/queryObject.do'
    var param = {
      page: this.currentPageSupplier,
      rows: this.pageSizeSupplier,
    }
    axios.get(url, param).then(response => {
      if (response.data.code == '0') {
        this.tableDataSupplier = response.data.data.list
        this.totalRowsSupplier = response.data.data.total
      } else {
        this.$message({
          type: 'error',
          message: '操作失败!' + response.data.msg
        });
      }
    });
  },
  seletion(row) {
    this.form.tInformationSupplier.id = row.id
    this.form.tInformationSupplier.supplierCode = row.supplierCode
    this.form.tInformationSupplier.supplierName = row.supplierName
    this.form.tInformationSupplier.supplierAddress = row.supplierAddress
    this.form.tInformationSupplier.supplierTel = row.supplierTel
    this.form.supplierId = row.id
    this.form.supplierName = row.supplierName
    this.dialogVisibleSupplier = false
  },

  // 修改每页行数
  handleSizeChange(val) {
    this.pageSizeDtl = val
    this.getTableDataDtl()
  },
  // 修改当前页事件
  handleCurrentChange(val) {
    this.currentPageDtl = val
    this.getTableDataDtl()
  },

}
};
</script>

<style>
</style>

全部代码...后台自己实现

sql :

<!--根据class关联查询-->
<select id="selectClass" resultMap="resultMap">
     select tt.develop,tt.salary,tt.years_working
     from t_wangzhaohui_demo as t left join t_wangzhaohui_demo_T as tt on t.demo_class = tt.demo_class_t
     where t.demo_class = #{demoClass} and t.cancel_status = 1
</select>