vue2+TS,el-table表格单选的写法

1.打开表格

javascript 复制代码
//父组件引入 
 <customerChoose ref="customerChooseRef" @onSure="setOrderInfoFn"></customerChoose>

//子传父,接收值,操作
 private async setOrderInfoFn(data) {
    this.form.customerId = data.id
    this.form.customerName = data.customerName
  }

打开dialog表格:

javascript 复制代码
private async chooseMultiFn(type) {
    await this.$nextTick()
    ;(this.$refs.customerChooseRef as any).opendialog(this.titles,this.form.customerId)

  }

2.表格的template写法

javascript 复制代码
<template>
  <el-dialog :show-close="false" title="选择客户" :visible.sync="customerDialogVisible" top="0px" width="1000px" center :close-on-click-modal="false" destroy-on-close append-to-body>
    <div style="width: 100%; height: 500px">
      <el-form :inline="true" :model="customerQueryCondition">
        <el-form-item label="客户编码:">
          <el-input v-model="customerQueryCondition.customerCode" clearable placeholder="请输入客户编码"></el-input>
        </el-form-item>
        <el-form-item label="客户名称:">
          <el-input v-model="customerQueryCondition.customerName" clearable placeholder="请输入客户名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="seachBtn" @click="searchOrReset(false)">
            <i class="el-icon-search"></i>
            {{ $t('i18n.search') }}
          </el-button>
          <el-button class="seachBtn" @click="searchOrReset(true)">
            <i class="el-icon-refresh"></i>
            {{ $t('i18n.reset') }}
          </el-button>
        </el-form-item>
      </el-form>
      <el-table size="small" header-row-class-name="monitorTable" stripe :data="tableData" height="400px" highlight-current-row border style="width: 100%" ref="myELTable" @row-click="chooseRadio">
        <el-table-column label="" width="50" align="center">
          <template scope="scope">
            <el-radio :label="scope.$index" name="radiobutton" v-model="radio"></el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="customerCode" label="客户编码" align="center"></el-table-column>
        <el-table-column prop="customerName" label="客户名称" align="center"></el-table-column>
        <el-table-column prop="address" label="客户地址" align="center"></el-table-column>
      </el-table>
    </div>
    <el-pagination :background="true" :current-page.sync="pageInfo.current" :page-size="pageInfo.size" layout="total,sizes, prev, pager, next, jumper, slot" :total="pageInfo.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" style="margin-top:20px;">
      <el-button style="margin-left: 5px" type="primary" @click="handleCurrentChange(pageInfo.current)">跳转</el-button>
    </el-pagination>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onCancelChoose">{{ $t('i18n.cancelBtn') }}</el-button>
      <el-button type="primary" @click="onSureChoose">{{ $t('i18n.sureBtn') }}</el-button>
    </div>
  </el-dialog>
</template>

3 .打开后操作:

打开后的初始化操作:

javascript 复制代码
private titlesOption: string = ''
  public opendialog(titles,customerId) {
    // 用户id,用于一开始勾选回显,没有就不勾
    this.customerId = customerId
    // 标题
    this.titlesOption = titles
    // 客户查询条件 一开始设为空
    this.customerQueryCondition = {}
    this.queryCache = {}
    this.openCustomerChooseDialog()
  }
  public async openCustomerChooseDialog() {
    this.radio = ''
    //获取表格数据
    let res = await getCustomerInfo(this.pageInfo.current, this.pageInfo.size, this.queryCache.customerCode || '', this.queryCache.customerName || '', '')
    this.tableData = res.data
    this.pageInfo.total = res.totalDataCount
    //打开弹窗
    this.customerDialogVisible = true
    if (this.customerId) {
      this.$nextTick(() => {
        // 初始化回显勾选
        this.radio = this.tableData.findIndex((item) => item.id == this.customerId)
      })
    }
  }

表格单选:

javascript 复制代码
//单选下标
private radio: any = ''

//存储选中行的数据
 private currentSelectedRow: any = {}

//@row-click="chooseRadio" 选中某一行
  private async chooseRadio(e) {
    this.tableData.filter((item, index) => {
      if (e.id == item.id) this.radio = index
    })
    this.currentSelectedRow = e
  }

4.点击确定后的操作

javascript 复制代码
//用于子传父  
@Emit('onSure')
  private onSure(row: any) {}

// 确定
  private async onSureChoose(e) {
    //把勾选的值传到父页面操作
    this.onSure(this.currentSelectedRow)
    this.customerDialogVisible = false
  }
相关推荐
林强1811 小时前
前端文件预览docx、pptx和xlsx
前端
计算机学姐1 小时前
基于微信小程序的高校班务管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
像是套了虚弱散4 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan4 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇4 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15885 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追6 小时前
Vue组件化开发
前端·html
艾德金的溪6 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长6 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH6 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js