当前位置:   article > 正文

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

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

1.打开表格 

  1. //父组件引入
  2. <customerChoose ref="customerChooseRef" @onSure="setOrderInfoFn"></customerChoose>
  3. //子传父,接收值,操作
  4. private async setOrderInfoFn(data) {
  5. this.form.customerId = data.id
  6. this.form.customerName = data.customerName
  7. }

打开dialog表格:

  1. private async chooseMultiFn(type) {
  2. await this.$nextTick()
  3. ;(this.$refs.customerChooseRef as any).opendialog(this.titles,this.form.customerId)
  4. }

 2.表格的template写法

  1. <template>
  2. <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>
  3. <div style="width: 100%; height: 500px">
  4. <el-form :inline="true" :model="customerQueryCondition">
  5. <el-form-item label="客户编码:">
  6. <el-input v-model="customerQueryCondition.customerCode" clearable placeholder="请输入客户编码"></el-input>
  7. </el-form-item>
  8. <el-form-item label="客户名称:">
  9. <el-input v-model="customerQueryCondition.customerName" clearable placeholder="请输入客户名称"></el-input>
  10. </el-form-item>
  11. <el-form-item>
  12. <el-button class="seachBtn" @click="searchOrReset(false)">
  13. <i class="el-icon-search"></i>
  14. {{ $t('i18n.search') }}
  15. </el-button>
  16. <el-button class="seachBtn" @click="searchOrReset(true)">
  17. <i class="el-icon-refresh"></i>
  18. {{ $t('i18n.reset') }}
  19. </el-button>
  20. </el-form-item>
  21. </el-form>
  22. <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">
  23. <el-table-column label="" width="50" align="center">
  24. <template scope="scope">
  25. <el-radio :label="scope.$index" name="radiobutton" v-model="radio"></el-radio>
  26. </template>
  27. </el-table-column>
  28. <el-table-column prop="customerCode" label="客户编码" align="center"></el-table-column>
  29. <el-table-column prop="customerName" label="客户名称" align="center"></el-table-column>
  30. <el-table-column prop="address" label="客户地址" align="center"></el-table-column>
  31. </el-table>
  32. </div>
  33. <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;">
  34. <el-button style="margin-left: 5px" type="primary" @click="handleCurrentChange(pageInfo.current)">跳转</el-button>
  35. </el-pagination>
  36. <div slot="footer" class="dialog-footer">
  37. <el-button @click="onCancelChoose">{{ $t('i18n.cancelBtn') }}</el-button>
  38. <el-button type="primary" @click="onSureChoose">{{ $t('i18n.sureBtn') }}</el-button>
  39. </div>
  40. </el-dialog>
  41. </template>

3 .打开后操作:

打开后的初始化操作

  1. private titlesOption: string = ''
  2. public opendialog(titles,customerId) {
  3. // 用户id,用于一开始勾选回显,没有就不勾
  4. this.customerId = customerId
  5. // 标题
  6. this.titlesOption = titles
  7. // 客户查询条件 一开始设为空
  8. this.customerQueryCondition = {}
  9. this.queryCache = {}
  10. this.openCustomerChooseDialog()
  11. }
  12. public async openCustomerChooseDialog() {
  13. this.radio = ''
  14. //获取表格数据
  15. let res = await getCustomerInfo(this.pageInfo.current, this.pageInfo.size, this.queryCache.customerCode || '', this.queryCache.customerName || '', '')
  16. this.tableData = res.data
  17. this.pageInfo.total = res.totalDataCount
  18. //打开弹窗
  19. this.customerDialogVisible = true
  20. if (this.customerId) {
  21. this.$nextTick(() => {
  22. // 初始化回显勾选
  23. this.radio = this.tableData.findIndex((item) => item.id == this.customerId)
  24. })
  25. }
  26. }

表格单选:

  1. //单选下标
  2. private radio: any = ''
  3. //存储选中行的数据
  4. private currentSelectedRow: any = {}
  5. //@row-click="chooseRadio" 选中某一行
  6. private async chooseRadio(e) {
  7. this.tableData.filter((item, index) => {
  8. if (e.id == item.id) this.radio = index
  9. })
  10. this.currentSelectedRow = e
  11. }

 4.点击确定后的操作

  1. //用于子传父
  2. @Emit('onSure')
  3. private onSure(row: any) {}
  4. // 确定
  5. private async onSureChoose(e) {
  6. //把勾选的值传到父页面操作
  7. this.onSure(this.currentSelectedRow)
  8. this.customerDialogVisible = false
  9. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/喵喵爱编程/article/detail/770973
推荐阅读