项目中新增商品的样式

1、商品编辑保存的样式变化（基于elementUI）

• 编辑视图
  
• 保存视图
  
• 实现代码

<el-button type="primary" size='mini' class="el-icon-plus" :disabled="disable"  @click='addTable'>新增</el-button>

<el-table
     ref='table1'
     :data="productsDatas"
     class='table1'
     height="200"
     stripe
     :header-cell-style="{background:'#f9f9f9'}"
    >
<el-table-column
 align='center'
  show-overflow-tooltip
  prop="productEname"
  label="商品英文描述">
  <template slot-scope="scope">
        <div v-if="!scope.row.editing">
          <span>{{ scope.row.productEname }}</span>
        </div>
        <div v-else>
          <el-input v-model="scope.row.productEname" placeholder="商品英文描述" size="small" />
        </div>
  </template>
</el-table-column>
<el-table-column
  align='center'
  prop="prdWeight"
  label="单箱重量（kg)">
  <template slot-scope="scope">
        <div v-if="!scope.row.editing">
          <span>{{ scope.row.prdWeight }}</span>
        </div>
        <div v-else>
          <el-input v-model="scope.row.prdWeight" placeholder="请输入单箱重量（kg)" size="small" />
        </div>
  </template>
</el-table-column>

<el-table-column
  align='center'
  prop="prdNum"
  label="箱数">
  <template slot-scope="scope">
        <div v-if="!scope.row.editing">
          <span>{{ scope.row.prdNum }}</span>
        </div>
        <div v-else>
          <el-input v-model="scope.row.prdNum" placeholder="请输入箱数" size="small" />
        </div>
  </template>
</el-table-column>
<el-table-column label="操作" show-overflow-tooltip align="center">
      <template slot-scope="scope">
        <el-button
          :disabled="disable"
          type="primary"
          size="small"
          v-if="!scope.row.editing"
          icon="el-icon-edit-outline"
          @click="edit(scope.$index, scope.row)"
        >编辑</el-button>
        <el-button
          type="primary"
          size="small"
          v-if="scope.row.editing"
          icon="el-icon-success"
          @click="addConfirm(scope.$index, scope.row)"
        >保存</el-button>
        <el-button
          type="primary"
          size="small"
          v-if="scope.row.editing"
          icon="el-icon-circle-close"
         @click="deleteProduct(scope.$index, scope.row)"
        >删除</el-button>
      </template>
    </el-table-column>
  </el-table>



data(){
	return{
		//新增表单列表
		addForm:{
        productName:'',//商品信息
        productEname:'',//商品信息英文描述
        prdWeight:'',//商品实际重量
        prdNum:''//箱数
      },
	}
}
//商品新增
addTable(){
   this.productsDatas = this.productsDatas || [];
    this.productsDatas.push({
      productEname: '',
      prdWeight: '',
      prdNum: '',
      editing: true,
    });
},

//产品信息编辑
 edit($index, row){
    console.log($index,row)
    this.$set(this.productsDatas[$index], 'editing', true);
  },
//产品信息新增保存
 addConfirm($index,row){
    console.log($index,row)
    this.$set(this.productsDatas[$index], 'editing', false);//$set的用法见下方
    if(this.addForm.productName && this.addForm.productEname && this.addForm.prdWeight && this.addForm.prdNum){
      let parseForm = JSON.parse(JSON.stringify(this.addForm));
      this.productsDatas.push(parseForm);
      this.multipleProductSelection.push(parseForm);
      // console.log(this.productsDatas) ;
    }     
    this.addForm.productName = '',
    this.addForm.productEname = '',
    this.addForm.prdWeight = '',
    this.addForm.prdNum = ''
  },
//产品信息删除  因为商品的新增是直接推进数组中的 并没有保存到接口中 因此删除分为两种方式  一种调用接口删除 一种是直接删除数组中的数据 因此需要判断条件
//值得注意的是 我们这种字面展示类型的新增和删除  并不需要每次都加载数据的 也可以进行页面展示上的删除
//产品删除
    deleteProduct($index,row){
      if(this.productsDatas[$index].onlinerdId){
        this.$http({
          method:'delete',
          url:'/api' + this.$api.haiyunchukou.yibanshuju.productRemove,
          data:{
            id: this.productsDatas[$index].onlinerdId,
          },
          success:(res)=>{
            this.productsDatas.splice($index, 1);
              if(res.success){
                this.$message({
                  type: "success",
                  message: "删除成功！"
                });
              }
              // this.getDetailData();
            }
          })
      }else{
        console.log($index,row)
        this.productsDatas.splice($index, 1);
        // this.getDetailData();
      }
    },

//vue中$set的用法
由于 Vue 会在初始化实例时进行双向数据绑定，使用Object.defineProperty()对属性遍历添加 getter/setter 方法，
所以属性必须在 data 对象上存在时才能进行上述过程 ，这样才能让它是响应的。如果要给对象添加新的属性，
此时新属性没有进行过上述过程，不是响应式的，所以会出想数据变化，页面不变的情况。此时需要用到$set。

2、Vue+elementUI中table表格常见的操作按钮

<template slot-scope="scope">
<el-button
   @click="isEdit = true;handleEdit(scope.row)"
   type="text"
   size="small"
 >编辑</el-button>
 <!-- <el-button
  @click.native="addexpChannel(scope.$index)"
  type="text"
  size="small"
 >关联供应商</el-button> -->
 <!-- <el-link type="primary" @click="isEdit = true;handleEdit(scope.row)">编辑</el-link> -->
 <el-dropdown size="small" style="margin-left:10px">
   <span class="el-dropdown-link">
     <el-button type="text" size="small">更多</el-button>
   </span>
   <el-dropdown-menu slot="dropdown" size="small">
     <!-- <el-dropdown-item @click.native="addUser(scope.$index)">新增用户</el-dropdown-item> -->
     <el-dropdown-item @click.native="addexpChannel(scope.$index)">关联供应商</el-dropdown-item>
     <el-dropdown-item @click.native="postChannel(scope.$index)">关联发件人</el-dropdown-item>
     <!-- <el-dropdown-item @click.native="deleteOrder(scope.$index)" size="small">删除</el-dropdown-item> -->
   </el-dropdown-menu>
 </el-dropdown>
 <!-- <el-button @click.native="deleteOrder(scope.$index)" type="text" size="small">删除</el-button> -->
</template>

• 以上写法可以保证操作按钮中的内容样式的一致性 避免常出现字体不一致的情况；