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中使用elementui实现树组件tree右键增删改功能

    vue中使用elementui实现树组件tree右键增删改功能

    这篇文章主要介绍了vue中使用elementui实现对树组件tree右键增删改功能,右击节点可进行增删改,对节点数据进行模糊查询功能,本文给大家分享了完整代码,需要的朋友可以参考下
    2022-08-08
  • 基于vue.js路由参数的实例讲解——简单易懂

    基于vue.js路由参数的实例讲解——简单易懂

    下面小编就为大家带来一篇基于vue.js路由参数的实例讲解——简单易懂。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue3 name 属性的使用技巧详解

    vue3 name 属性的使用技巧详解

    这篇文章主要为大家介绍了vue3 name 属性的使用技巧详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • vue无法加载文件C:\xx\AppData\Roaming\npm\vue.ps1系统禁止运行脚本

    vue无法加载文件C:\xx\AppData\Roaming\npm\vue.ps1系统禁止运行脚本

    这篇文章主要介绍了vue : 无法加载文件 C:\xx\AppData\Roaming\npm\vue.ps1...系统上禁止运行脚本问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • vue实现三级页面跳转功能

    vue实现三级页面跳转功能

    这篇文章主要介绍了vue实现三级页面跳转功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-05-05
  • vue实现原理this.$message实例详解

    vue实现原理this.$message实例详解

    这篇文章主要介绍了vue实现原理this.$message实例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-03-03
  • Vue 清除Form表单校验信息的解决方法(清除表单验证上次提示信息)

    Vue 清除Form表单校验信息的解决方法(清除表单验证上次提示信息)

    这篇文章主要介绍了Vue 清除Form表单校验信息的解决方法(清除表单验证上次提示信息),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue如何使用模拟的json数据查看效果

    vue如何使用模拟的json数据查看效果

    这篇文章主要介绍了vue如何使用模拟的json数据查看效果,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vue使用html2canvas和jspdf将html转成pdf

    vue使用html2canvas和jspdf将html转成pdf

    在前端开发中, html转pdf是最常见的需求,下面这篇文章主要给大家介绍了关于vue如何使用html2canvas和jspdf将html转成pdf的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • Electron+Vue3+Vite搭建桌面应用的示例代码

    Electron+Vue3+Vite搭建桌面应用的示例代码

    本文主要介绍了Electron+Vue3+Vite搭建桌面应用的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07

最新评论