页面引入子组件,并调用子组件中方法

在这里插入图片描述
按钮中绑定事件
在这里插入图片描述
事件中调用子组件方法,同时对方法中传入参数
在这里插入图片描述
封装的子组件:

<template>
  <div class="execution">
    <basic-container>
      <avue-crud ref="crud"
                 :data="tableData"
                 :table-loading="tableLoading"
                 :option="tableOption">
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
  import * as hyjbxx from '@/const/crud/hygl/hyjbxx'
  import * as rfjrcpxx from '@/const/crud/hygl/rfjrcpxx'
  import * as rfjkcpxx from '@/const/crud/hygl/rfjkcpxx'
  import * as rfjrtzjy from '@/const/crud/hygl/rfjrtzjy'
  import * as rfjktzjy from '@/const/crud/hygl/rfjktzjy'
  import * as rfjfzs from '@/const/crud/hygl/rfjfzs'
  import * as rflcbg from '@/const/crud/hygl/rflcbg'
  import * as rfyjjyhf from '@/const/crud/hygl/rfyjjyhf'
  import * as rflpzlxx from '@/const/crud/hygl/rflpzlxx'
  import * as rflcbgmb from '@/const/crud/hygl/rflcbgmb'

  import store from '@/store'

  export default {
    name: 'ShowSpywDxView',
    data() {
      return {
        tableLoading: false,
        tableData:[],
        tableOption: [],
        headers: {
          Authorization: 'Bearer ' + store.getters.access_token
        },
        colums:{
          lc1:rfjrcpxx,
          lc2:rfjrcpxx,
          lc3:rflpzlxx,
          lc4:rflpzlxx,
          lc5:rflcbg,
          lc6:rfjrtzjy,
          lc7:hyjbxx,
          lc8:rfjfzs,
          lc9:rfjkcpxx,
          lc10:rfjkcpxx,
          lc11:rfjktzjy,
          lc12:rflcbgmb,
          lc13:rfyjjyhf
        }
      }
    },
    computed: {
      /*...mapGetters(['themeName'])*/
    },
    watch: {

    },
    mounted() {

    },
    methods: {
      showRowForm:function(lcid,row){
        console.log(row)
        this.tableData=[]
        this.tableData.push(row)
        this.tableLoading=true
        if ((this.colums["lc"+lcid]) && (this.colums["lc"+lcid].tableOption)){
          this.tableOption=this.colums["lc"+lcid].tableOption
          this.$refs.crud.rowView(row, 0)
          //this.$refs.crud.rowEdit(row, 0)
        }else {
          this.$message.warning(`该流程信息未配置,请与管理人员联系!`);
          return
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  /* .list {
     width: 100%;
   }*/
  /*导入弹窗文件加载样式*/
  .importIconForm{
    height:250px;
    position:relative;
  }
  .importIcon{
    position:absolute;
    top:30%;
    left:45%;
  }
  .importIcon h3{
    margin-left:-30px;
  }
</style>


发布了55 篇原创文章 · 获赞 4 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_44770377/article/details/103579955