父组件点击"关联公司"输入框(如下图)弹出子组件dialog

子组件效果下图默认选中

父组件代码

点击输入框

   <el-form-item v-if="flag" label="关联公司" prop="orgName">
          <el-select v-model="form.orgName" clearable placeholder="请选择公司" @click.native="selectCompany" @clear="clearCompany" />
        </el-form-item>

引入的子组件
  <!-- 添加公司 -->
    <Select-company
      :company-visible.sync="companyVisible"
      :company-name="companyName"
      @select-company="companyData"
    />

对应的函数  
// 清空输入框
clearCompany() {
      this.form.orgName = null
    },
// 打开子组件
 selectCompany(row) {
      this.companyVisible = true
    },
// 选中返回的值
 companyData(data) {
      this.form.orgName = data.companyName
    },

变量
 companyVisible: false
 companyName: null,


 子组件代码 SelectCompany.vue

<template>
  <el-dialog
    :title="title"
    :visible.sync="_visible"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    width="40%"
    @closed="handleClosed"
    @open="handleOpend"
  >
    <!-- 搜索栏 -->
    <el-row>
      <el-form :inline="true" :model="searchMap">
        <el-form-item label="公司名称:">
          <el-input v-model="searchMap.companyName" size="mini" />
        </el-form-item>
        <div style="float:right">
          <el-button
            size="mini"
            type="primary"
            round
            icon="el-icon-search"
            @click="onSearch"
          >搜索</el-button></div>
      </el-form>

    </el-row>
    <!-- 功能区 -->
    <el-table ref="sensorTable" :data="tableData" tooltip-effect="dark" height="255" style="width: 100%" @current-change="clickChange">
      <el-table-column label="选择" width="55">
        <template slot-scope="scope">
          <el-radio v-model="tableRadio" :label="scope.row"><i /></el-radio>
        </template>
      </el-table-column>
      <el-table-column
        type="index"
        label="序号"
        :index="indexMethod"
        align="center"
      />
      <el-table-column
        prop="companyName"
        label="公司名称"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="repairPhone"
        label="报修电话"
        :show-overflow-tooltip="true"
      />
    </el-table>
    <!-- 分页条 -->
    <div class="t-paging">
      <el-pagination
        :current-page="searchMap.pageNum"
        :page-sizes="savedPageSizes"
        :page-size="savedPageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClosed">取 消</el-button>
      <el-button @click="submit">确 定</el-button>
    </span>
  </el-dialog>

</template>
<script>
import { mapState } from 'vuex'
import { queryTable } from '@/api/dictionary/company.js'
export default {
  name: 'CompanySection',
  props: {
    companyVisible: {
      type: Boolean,
      default: false
    },
    companyName: {
      type: String,
      default: null
    }},

  data() {
    return {
      tableData: [],
      tableRadio: {
        id: null,
        companyName: null
      },
      searchMap: {
        companyName: null,
        pageNum: 1,
        pageSize: null
      },
      total: 0
    }
  },
  computed: {
    ...mapState({
      savedPageSize: state => state.page.tablePageSize,
      savedPageSizes: state => state.page.tablePageSizes,
      tableStyle: state => state.page.tableStyle
    }),
    title: {
      get() {
        return '公司信息'
      }
    },
    _visible: {
      get() {
        return this.companyVisible
      },
      set(val) {
        this.$emit('update:companyVisible', val)
      }
    }
  },
  created() {
    this.initData()
  },

  methods: {
    initData() {
      this.searchMap.pageSize = this.savedPageSize
      this.loadTable()
    },
    loadTable() {
      queryTable(this.searchMap).then(res => {
        this.tableData = res.items
        this.total = res.total
        this.tableRadio = res.items.find(e => e.companyName === this.companyName)
      })
    },

    indexMethod(index) {
      index = (index + 1) + (this.searchMap.pageNum - 1) * this.searchMap.pageSize
      return index
    },
    handleOpend() {
      this.loadTable()
    },
    handleClosed() {
      this.tableRadio = null
      this.searchMap.pageNum = 1
      this.searchMap.companyName = null
      this._visible = false
    },
    clickChange(item) {
      this.tableRadio = item
    },
    submit() {
      if (this.tableRadio == null) {
        this.$message({
          type: 'warning',
          message: '请选择一条数据!'
        })
      } else {
        this.$emit('select-company', this.tableRadio)
        this._visible = false
      }
    },
    // 搜索按钮
    onSearch() {
      this.loadTable()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.searchMap.pageSize = val
      this.$store.dispatch('setTablePageSize', val)
      this.loadTable()
    }, handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.searchMap.pageNum = val
      this.loadTable()
    }
  }

}

</script>
<style scoped></style>

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐