Vue+ElementUI el-radio列表单选

实现效果：

对某条数据进行数据修改

步骤：

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 : "",