vue 第一个页面加载时将表第一行参数传给第二个页面进行初始化

喂胖我家猪猪霞

已于 2022-02-24 16:20:04 修改

阅读量1k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-02-24 16:18:40 首次发布

本文链接：https://blog.csdn.net/smilelove520/article/details/123112768

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

项目中有很多多表多页面级联显示的业务,每次都需要点击行来触发另一个页面的加载,这样页面看起来效果不是很好。现需要在第一个页面加载完毕根据表中第一行的内容自动触发别的页面初始化,使用watch来监听第一个页面表格数据变化进行调用第二个页面方法,记录一下供以后使用。

watch 监听

父页面

<div class="title-font">药品申请列表</div>
<el-table ref="applyTable" v-loading="loading" :data="applyList"
              class="divMain" highlight-current-row @row-click="queryApplyDetail">
      <el-table-column type="index" width="50" align="center"/>
      <el-table-column type="selection" width="30" align="center"/>
      <el-table-column label="编码" align="center" prop="id" min-width="120"/>
</el-table>
<div class="title-font">申请单详细信息</div>
<detailDialog ref="detailDialog"/> //级联子页面

 data() {
    return {
      // 遮罩层
      loading: true,
      // 申请list表格数据
      applyList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 30,
      }
    };
  },
 created() {
    this.getList();
  },
  watch: {
    applyList: function () { //监听:data="applyList"的数据变化
      if (this.applyList.length > 0) { //如果表中有数据,就把第一行数据id传给子页面
        this.$refs.detailDialog.getList(this.applyList[0].id);
      } else {
        this.$refs.detailDialog.getList('-1'); //若表中无值也让子页面执行getList刷新一下
      }
    }
  },
  methods: {
    /** 查询药品规格列表 */
    getList() {
      this.loading = true;
      applyList(this.queryParams).then(response => {
        this.applyList = response.rows;
        this.$refs.applyTable.setCurrentRow(this.applyList[0]) //默认表格第一行高亮
        this.loading = false;
      });
    },
    queryApplyDetail(row) { //点击行触发子页面
      let applyDetailView = this.$refs.detailDialog;
      this.$nextTick(() => {
        applyDetailView.queryParams.id= parseInt(row.id);
        applyDetailView.getList();
      });
    }
   }

子页面

<el-table v-loading="loading" :data="applyDetailList" ref="detailTable" 
              :highlight-current-row="true">
      <el-table-column type="index" width="50" align="center"/>
      <el-table-column type="selection" width="30" align="center"/>
      <el-table-column label="编码" align="left" prop="code" min-width="120"/>
    </el-table>

data() {
    return {
      // 遮罩层
      loading: false,
      // 申请详情信息表格数据
      applyDetailList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id: null,
      }
    };
  },
  methods: {
    /** 查询条码信息列表 */
    getList(id) { //由父页面传来的id进行查询
      this.loading = true;
      if (id!= null && id!= '')
        this.queryParams.id= id;
      detailList(this.queryParams).then(response => {
        this.applyDetailList = response.rows;
        this.loading = false;
      });
    },