element表格增加/删除，以及{key:value}形式传参-一一网

第一部分：element表格增加/删除

在项目开发中会遇到element的表格，表格里包含input框、select选择框，以及增加/减少一行。

<template>
  <div class="home">
    <el-table :data="tableData" @selection-change="handleSelectionChange" style="width: 100%" size="small" stripe>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="数量" width="180">
        <template scope="scope">
          <el-input size="small" v-model="scope.row.num"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="价格" width="180">
        <template scope="scope">
          <el-input size="small" v-model="scope.row.price"></el-input>
        </template>
      </el-table-column>
      <el-table-column v-for="(item, index) in childData" :key="item.id" :label="item.name">
        <template scope="scope">
          <el-select v-model="scope.row.grandsonData[index]" clearable placeholder="请选择" size="small">
            <el-option v-for="items in item.value" :key="items.grandson_id" :label="items.grandson_name" :value="items.grandson_id"></el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
    <div class="sku-table-btn">
      <el-button plain icon="el-icon-plus" size="small" @click="add">添加</el-button>
      <el-button plain icon="el-icon-delete" size="small" @click="del">删除</el-button>
    </div>
  </div>
</template>
复制代码

我的data数据里，其中childData是模拟当时后端给我的格式：

data () {
    return {
      tableData: [{
        num: '',
        price: '',
        grandsonData: []
      }],
      childData: [{
        id: 1,
        name: '颜色',
        value: [{
          grandson_id: 11,
          grandson_name: '白色'
        }, {
          grandson_id: 12,
          grandson_name: '蓝色'
        }, {
          grandson_id: 13,
          grandson_name: '红色'
        }]
      }, {
        id: 2,
        name: '尺寸',
        value: [{
          grandson_id: 22,
          grandson_name: 'S'
        }, {
          grandson_id: 23,
          grandson_name: 'M'
        }, {
          grandson_id: 24,
          grandson_name: 'L'
        }]
      }, {
        id: 3,
        name: '单位',
        value: [{
          grandson_id: 32,
          grandson_name: '个'
        }, {
          grandson_id: 33,
          grandson_name: '箱'
        }, {
          grandson_id: 34,
          grandson_name: '车'
        }]
      }]
    }
  }
复制代码

methods里的方法

add() 增加的逻辑：

 created () {
    this.allChecked = []
 },
 methods: {
    // 当选择项发生变化时会触发该事件
    handleSelectionChange (val) {
      this.allChecked = val.map(x => x.id)
    },
    // 添加
    add () {
      const obj = {
        num: '',
        price: '',
        grandsonData: []
      }
      this.tableData.push(obj)
    }
  }
复制代码

那么问题来了，选中当行，进行删除，我怎么知道当行，拿不到 element的 el-table 的那一行 index；当时翻看多次文档，以及百度许久，只有 el-table-column下的 scope 里才有 index。但是不是我要的当行 index，所以我的解决办法是自行添加id，把Date当为id，确保id的唯一值。

添加id

// data 里的 tableData 添加id
data () {
    return {
        tableData: [{
            id: new Date().getTime(),
            num: '',
            price: '',
            grandsonData: []
      }]
    }
}

// 点击添加一行里的数据 添加id
add () {
  const obj = {
    id: new Date().getTime(),
    num: '',
    price: '',
    grandsonData: []
  }
  this.tableData.push(obj)
},
复制代码

删除逻辑：

del () {
  this.tableData = this.tableData.filter(x => {
    return !this.allChecked.includes(x.id)
  })
}
复制代码

第二部分：用{key:value}的形式传参

第一次传参给后端的格式是这样的：attr: ’12_23_24′

然而后端改变了传参的格式变成 {key:value}，其实我的内心是充满怀疑的，很不理解这种传参形式，最终我还是照做了，进行4次循环处理，循环用的是高阶函数。

最后在这里贴上完整的代码：

<template>
  <div class="home">
    <el-table :data="tableData" @selection-change="handleSelectionChange" style="width: 100%" size="small" stripe>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="数量" width="180">
        <template scope="scope">
          <el-input size="small" v-model="scope.row.num"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="价格" width="180">
        <template scope="scope">
          <el-input size="small" v-model="scope.row.price"></el-input>
        </template>
      </el-table-column>
      <el-table-column v-for="(item, index) in childData" :key="item.id" :label="item.name">
        <template scope="scope">
          <el-select v-model="scope.row.grandsonData[index]" clearable placeholder="请选择" size="small">
            <el-option v-for="items in item.value" :key="items.grandson_id" :label="items.grandson_name" :value="items.grandson_id"></el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
    <div class="sku-table-btn">
      <el-button plain icon="el-icon-plus" size="small" @click="add">添加</el-button>
      <el-button plain icon="el-icon-delete" size="small" @click="del">删除</el-button>
      <el-button plain size="small" @click="sav">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      tableData: [{
        id: new Date().getTime(),
        num: '',
        price: '',
        grandsonData: []
      }],
      childData: [{
        id: 1,
        name: '颜色',
        value: [{
          grandson_id: 11,
          grandson_name: '白色'
        }, {
          grandson_id: 12,
          grandson_name: '蓝色'
        }, {
          grandson_id: 13,
          grandson_name: '红色'
        }]
      }, {
        id: 2,
        name: '尺寸',
        value: [{
          grandson_id: 22,
          grandson_name: 'S'
        }, {
          grandson_id: 23,
          grandson_name: 'M'
        }, {
          grandson_id: 24,
          grandson_name: 'L'
        }]
      }, {
        id: 3,
        name: '单位',
        value: [{
          grandson_id: 32,
          grandson_name: '个'
        }, {
          grandson_id: 33,
          grandson_name: '箱'
        }, {
          grandson_id: 34,
          grandson_name: '车'
        }]
      }]
    }
  },
  created () {
    this.allChecked = []
  },
  methods: {
    // 当选择项发生变化时会触发该事件
    handleSelectionChange (val) {
      this.allChecked = val.map(x => x.id)
    },
    // 添加
    add () {
      const obj = {
        id: new Date().getTime(),
        num: '',
        price: '',
        grandsonData: []
      }
      this.tableData.push(obj)
    },
    // 删除
    del () {
      this.tableData = this.tableData.filter(x => {
        return !this.allChecked.includes(x.id)
      })
    },
    // 保存
    sav () {
      // attr: '11_23_24' 的传参形式
      // this.tableData.map(x => {
      //   x.attr = x.grandsonData.join('_')
      //   delete x.grandsonData
      //   delete x.id
      //   return x
      // })
      
      // [{id: 12, id: 23, id: 45}]
      const arr = this.tableData.map(item => {
        const obj = {}
        item.grandsonData.forEach(i => {
          this.childData.forEach(y => {
            y.value.forEach(x => {
              if (x.grandson_id === i) {
                obj[y.id] = i
              }
            })
          })
        })
        return obj
      })
      console.log(arr, 11111)
    }
  }
}
</script>

复制代码

请问大家有遇到过传参{key:value}的这样格式吗？是否有更好的方法解决？避开我用的这种4次循环，较浪费性能的缺点。

哈哈哈，今天又是美好的一天。

文章版权归作者所有，未经允许请勿转载。

THE END

前端