vue实现简单多规格

实现效果图、代码可直接拿来使用

一、template代码

<el-table :data="tableData" style="width: 100%">
          <el-table-column align="center" label="id" prop="id" width="180" />
          <el-table-column align="center" label="名称" width="180">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" placeholder="规格名称" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="库存" width="180">
            <template slot-scope="scope">
              <el-input v-model="scope.row.inventory" placeholder="库存" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="限购">
            <template slot-scope="scope">
              <el-input v-model="scope.row.quota" placeholder="限购" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="划线价">
            <template slot-scope="scope">
              <el-input v-model="scope.row.crossedPrice" placeholder="划线价" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="售价">
            <template slot-scope="scope">
              <el-input v-model="scope.row.price" placeholder="售价" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="结算价">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.settlementPrice"
                placeholder="结算价"
              />
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-popover
                :ref="`popover-${scope.$index}`"
                placement="left"
                trigger="click"
                width="260"
              >
                <p>确定删除改规格吗？</p>
                <div style="text-align: center">
                  <el-button size="mini" @click="quxiao(scope)">取消</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="deleteRow(scope, tableData)"
                  >
                    确定
                  </el-button>
                </div>
                <div style="cursor: pointer; color: #3054eb" slot="reference">
                  删除
                </div>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <el-button
          style="margin-top: 10px; margin-bottom: 10px"
          type="primary"
          @click="increase"
        >
          添加
        </el-button>

二、js代码

data() {
i: 0,
tableData: [],
}

methods: {
      quxiao(ee) {
        ee._self.$refs[`popover-${ee.$index}`].doClose()
      },
      deleteRow(ee, row) {
        this.$confirm(`确定要删除改规格吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then( () => {
            row.splice(ee.$index,1)
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '您取消了删除',
            })
          })
        ee._self.$refs[`popover-${ee.$index}`].doClose()

      },
      
      increase() {
        this.i ++
        let hh = {
          id: this.i,
          name: '',
          inventory: '',
          quota: '',
          crossedPrice: '',
          price: '',
          settlementPrice: ''
        }
        this.tableData.push(hh)
      },
}