vue el-radio单选传值和默认选中方式

 更新时间:2025年01月14日 08:58:01   作者:qq_31517427  
文章介绍了一个父组件和子组件的交互过程,父组件通过点击“关联公司”输入框弹出子组件dialog,子组件中使用SelectCompany.vue实现默认选中功能,作者分享了个人经验,希望能对大家有所帮助

vue el-radio单选传值和默认选中

父组件点击"关联公司"输入框 (如下图) 弹出子组件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>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue $refs动态拼接获取值问题

    vue $refs动态拼接获取值问题

    这篇文章主要介绍了vue $refs动态拼接获取值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 计算属性和侦听器详情

    计算属性和侦听器详情

    这篇文章主要介绍了计算属性和侦听器,文章以介绍计算属性、侦听器的相关资料展开详细内容,需要的朋友可以参考一下,希望对你有所帮助
    2021-11-11
  • vue3全局组件自动注册功能实现

    vue3全局组件自动注册功能实现

    本文主要讲述vue3的全局公共组件的自动注册功能,本文分步骤结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-02-02
  • vue+elementUI中el-radio设置默认值方式

    vue+elementUI中el-radio设置默认值方式

    这篇文章主要介绍了vue+elementUI中el-radio设置默认值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • Vue屏幕自适应三种实现方法详解

    Vue屏幕自适应三种实现方法详解

    在实际业务中,我们常用图表来做数据统计,数据展示,数据可视化等比较直观的方式来达到一目了然的数据查看,但在大屏开发过程中,常会因为适配不同屏幕而感到困扰,下面我们来解决一下这个不算难题的难题
    2022-11-11
  • Vue实现点击按钮进行上下页切换

    Vue实现点击按钮进行上下页切换

    这篇文章主要介绍了Vue实现点击按钮进行上下页的切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • Vue替代vuex的存储库Pinia详细介绍

    Vue替代vuex的存储库Pinia详细介绍

    这篇文章主要介绍了Vue替代vuex的存储库Pinia,听说pinia与vue3更配,便开启了vue3的学习之路,pinia 和 vuex 具有相同的功效, 是 Vue 的存储库,它允许您跨组件/页面共享状态
    2022-09-09
  • Vue状态管理工具Vuex工作原理解析

    Vue状态管理工具Vuex工作原理解析

    Vuex是一个专为Vue.js应用程序开发的状态管理模式,下面这篇文章主要给大家介绍了关于Vue中状态管理器(vuex)详解以及实际应用场景的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • Vue使用vue-draggable 插件在不同列表之间拖拽功能

    Vue使用vue-draggable 插件在不同列表之间拖拽功能

    这篇文章主要介绍了使用vue-draggable 插件在不同列表之间拖拽,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • Vue中实现动态更新JSON数据的三种方式

    Vue中实现动态更新JSON数据的三种方式

    在 Vue 项目中动态更新 JSON 数据,可以通过以下几种方式实现,具体方法取决于你的需求,比如数据是存储在前端还是后端、是否需要持久化等,文中通过代码示例讲解的非常详细,需要的朋友可以参考下
    2025-04-04

最新评论