快捷導(dǎo)航

vue el-radio單選傳值和默認(rèn)選中方式

更新時間：2025年01月14日 08:58:01 作者：qq_31517427

文章介紹了一個父組件和子組件的交互過程,父組件通過點擊“關(guān)聯(lián)公司”輸入框彈出子組件dialog,子組件中使用SelectCompany.vue實現(xiàn)默認(rèn)選中功能,作者分享了個人經(jīng)驗,希望能對大家有所幫助

vue el-radio單選傳值和默認(rèn)選中

父組件點擊"關(guān)聯(lián)公司"輸入框 (如下圖) 彈出子組件dialog

子組件效果下圖默認(rèn)選中

父組件代碼

點擊輸入框

   <el-form-item v-if="flag" label="關(guān)聯(lián)公司" 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"
    />

對應(yīng)的函數(shù)  
// 清空輸入框
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>
    <!-- 功能區(qū) -->
    <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: '請選擇一條數(shù)據(jù)!'
        })
      } 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(`當(dāng)前頁: ${val}`)
      this.searchMap.pageNum = val
      this.loadTable()
    }
  }

}

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