Vue+ElementUI el-radio列表单选

实现效果:

对某条数据进行数据修改
Vue+ElementUI el-radio列表单选_第1张图片
Vue+ElementUI el-radio列表单选_第2张图片

步骤:

1、添加单选按钮:(点击获取该条信息的id,并将id传给修改按钮)

div.

1、修改按钮

<span size="mini" @click="handleItem" v-loading="loadingButton">修改信息</span>

2、列表单选按钮

<el-table
	size="mini"
   :data="listData"
   class="mod-table"
   border
   stripe
   ref="tableData"
   @row-click="single">
	 <el-table-column label="" width="40">
	   <template slot-scope="scope">
	     <el-radio class="radio" v-model="templateSelection" :label="scope.row.id"><i></i></el-radio>
	   </template>
	 </el-table-column>
</el-table>

3、修改页面

 <div v-if="isChoose" class="modalBox">
      <div class="formBox">
        <div class="modalHeaderBox">
          <span>修改项目信息</span>
          <i @click="escReset"/>
        </div>
        <div class="middleBox">
          <el-form :label-position="'left'" :inline="true" :model="middle" size="medium">
               <el-form-item label="管理类别">
              <el-select v-model="middle.manageValue" placeholder="请选择管理类别">
                <el-option
                  v-for="item in manageValue"
                  :key="item.code"
                  :label="item.value"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
           </el-form>
        </div>
        <div class="confirmBox">
		  <el-button @click="reset">关闭</el-button>
		  <el-button @click="goInfo()">确认</el-button>
		</div>
      </div>
    </div>
date.
 return {
   templateSelection: '',
   radio: '',
   isChoose: false,
   }
methods.
// 单击获取id
single (row) {
     this.radio = row.id;
},
 // 修改信息
handleItem(){
  if(this.radio === ''){
    return this.$message.warning("请选择需要修改的项目信息!")
  }
  this.isChoose = true
  let response =  this.$api.item.itemById(this.radio);// 根据id查询信息
  if(response.code == 200){
    this.middle= response.data;
  }
},
// 点击确认按钮
       goInfo() {
        this.file =
          {
            id: this.radio,
            .
            .
            .
            写需要修改的参数
          };
        let res = this.$api.item.getInfoById(this.file);// 修改的接口
        if (res.code == 200) {
          this.$message.success("修改成功!");
          this.isChoose = false;
          this.getList(); //获取列表数据
        } else {
          this.$message.error(res);
        }
      },
// 关闭弹框
 reset() {
   this.isChoose = false;
   this.filters = {
     itemName: '', //项目名称
     .
     .
     .
     写修改的参数为空,情况内容的操作
   };
 },

遇到的坑

这里面有关联字段,比如manageCode和 manageValue(及相应的code值对应的value值)之前后端没有告诉我哈,我花啦好长时间整理,因为我传参的时候,并不知道有这种关联关系,导致我做了很多判断语句,嘿嘿,尴尬!!

原代码:

1、修改页面回显数据

<el-form-item label="管理类别">
   <el-select v-model="middle.manageCode" placeholder="请选择管理类别">
     <el-option
       v-for="item in manageValue"
       :key="item.code"
       :label="item.value"
       :value="item">
     </el-option>
   </el-select>
 </el-form-item>

导致传参时就出现传value后,详情回显数据获取的却是code值,所以想到它应该是有关联的,然后又遇到这边后台的一个问题,他们的处理方式是无误是否修改,都会将所有参数全部传递给后台,所以就需要我们做个判断,如何不是修改的内容,就要将详情原有数据传递回去

注意:

参数当中判断是否有对象时 开始用typeof发现并没有什么效果,后来用啦

Object.prototype.toString.call(obj) === "[object Object]"
示例:
manageValue: this.middle.manageValue != undefined ? Object.prototype.toString.call(this.middle.manageValue) === '[object Object]' ? this.middle.manageValue.value : this.middle.manageValue : "",

你可能感兴趣的:(VUE,ElementUI)