vue中使用ant design vue的table和单选框(radio)配合使用

news/2024/7/10 2:24:05 标签: vue, javascript, vue.js, html, es6

现在的需求就是在每个table渲染的列里边渲染每一个,改一个值的话,就给后端传改的那个值,
在这里插入图片描述
如果改一个值的话,就传一个,改几个传几个,现在的方法就是先给一个空字符串,改一个就把值赋值到那个空字符串中。

html"><template slot="handleResult" slot-scope="text, record">
  <a-radio-group v-model="record.dataStatus" @change="onChangeRadio">
    <a-radio :style="radioStyle" :value="0">立即完成整改</a-radio>
    <a-radio :style="radioStyle" :value="2">限时完成整改</a-radio>
  </a-radio-group>
</template>
 onChangeRadio(e) {
   // console.log('radio checked', e.target.value)
   let arrData = '';
   this.dataSource.forEach((item) => {
     arrData += item.dataStatus + ',';
   })
   this.arrData = arrData.slice(0, -1);
   console.log('arr',arrData)
 },

还有一个问题是如果后端传的值是字符串的话,那就需要给一个对象里边添加一个值check就是添加的值

html"><template slot="ckResult" slot-scope="text, record">
 <a-radio-group
   :default-value="Number(record.ckResult)"
   v-model="record.check"
   @change="onChangeRadiockResult(record,text)"
 >
   <a-radio :style="radioStyle" :value="0">符合</a-radio>
   <a-radio :style="radioStyle" :value="1">不符合</a-radio>
   <a-radio :style="radioStyle" :value="2">不适用</a-radio>
 </a-radio-group>
</template>
// 改变的时候把值赋给这个值
  onChangeRadiockResult(record, index) {
    this.dataSource[index].check = record.check
  },
  // 如果在自带的改变事件里边改变值的话,就只会给一个改变,所以点击确定的时候再给后端传值,
 let strData = '';
this.dataSource.forEach((item) => {
 if (!item.check) {
   item.check = item.ckResult;
 }
 strData += item.check + ',';
})
// slice去除最后一个逗号
this.strData = strData.slice(0, -1);

http://www.niftyadmin.cn/n/763881.html

相关文章

vue中动态添加类名,点击哪个,哪个背景颜色变化

今天遇到一个需求就是&#xff0c;就是当点击一个按钮的让按钮的颜色不一样&#xff0c;因为这个是循环出来的,所以说点击的时候点哪个就把哪个的id或者下标&#xff08;index&#xff09;传过去就好了。就需要动态添加类名。 <a-row><a-col :span"4" v-fo…

python多线程库_详解Python多线程下的list

list 是 Python 常用的几个基本数据类型之一.正常情况下我们会对 list 有增删改查的操作,显然易见不会有任何问题.那么如果我们试着在多线程下操作list 会有问题吗? 多线程下的 list 安全 or 不安全&#xff1f; 不安全&#xff01; 通常我们说的线程安全是指针对某个数据结构…

vue中使用ant-design-vue清空value的问题

是因为再点击重置的时候你的input或者checkedbox没有绑定value值或者v-bind <a-input placeholder"请输入检查项目" change"changeProject" :valueproject></a-input> <a-checkbox change"onChangeBenchmarking" v-model"b…

用python打印1234_python入门教程NO.1 用python打印你的宠物小精灵吧

我们来通过一个有趣的例子开始编写我们的第一个python代码。 本文涉及的python基础语法为&#xff1a;print输出函数&#xff0c;赋值&#xff0c;字符串 print() print()是python的一个内置函数&#xff0c;用于打印输出&#xff0c;是最常见的一个函数之一。 有些朋友可能对于…

vue使用ant design vue(upload)文件上传

使用remove的时候是一个函数&#xff0c;刚开始我用的remove后来用上:remove才可以,因为接收的是一个&#xff08;点击移除文件时的回调&#xff0c;返回值为 false 时不移除。支持返回一个 Promise 对象&#xff0c;Promise 对象 resolve(false) 或 reject 时不移除。&#xf…

为什么使用累积分布函数处理后像素值会均匀分布_等待中的悖论:概率分布简介...

我必须等多长时间才能上车&#xff1f;Photo by Jerry Zhang on Unsplash谁不知道这种感觉&#xff1a;您步行去公交车站&#xff0c;等公共汽车&#xff0c;然后…等。 然后您再等一会。 还有更多。 有人告诉您&#xff0c;巴士平均每10分钟一班。 现在您已经等了10分钟。 公共…

使用ant design vue组件(保持默认参数的存在,传更多自己需要的参数)

先允许我唠叨下&#xff0c;应该很多人都会&#xff0c;那我也记录一下。理解一下。 使用组件有一个参数的时候直接使用$event <a-date-picker :default-value"moment(item.createTime)" change"createTimeChange($event,你需要传的参数)"/>createT…

python遗传算法工具包_Python遗传和进化算法框架(一)Geatpy快速入门

Geatpy是一个高性能实用型的Python遗传算法工具箱&#xff0c;提供一个面向对象的进化算法框架&#xff0c;经过全面改版后&#xff0c;新版Geatpy2目前由华南农业大学、暨南大学、华南理工等本硕博学生联合团队开发及维护。 Geatpy提供了许多已实现的遗传和进化算法相关算子的…