elementUi 可编辑表格

/*表格代码*/
 <el-table border :data="couponDetailList" style="width: 100%">
          <el-table-column prop="ruleType" label="规则类型" align="center">
            <template #default="scope">
              <el-select v-show="!scope.row.editFlag" v-model="scope.row.ruleType" filterable clearable remote
                reserve-keyword placeholder="请选择规则类型" :loading="loading" disabled style="width: 210px;">
                <el-option v-for="item in ruleType" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <el-select v-show="scope.row.editFlag" v-model="scope.row.ruleType" filterable clearable remote
                reserve-keyword placeholder="请选择规则类型" :loading="loading" style="width: 210px;">
                <el-option v-for="item in ruleType" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="faceValue" label="面值" align="center">
            <template #default="scope">
              <span v-show="!scope.row.editFlag">{{ scope.row.faceValue }}</span>
              <el-input v-show="scope.row.editFlag" v-model="scope.row.faceValue" placeholder="请输入面值"
                style="width: 210px;" />
            </template>
          </el-table-column>
          <el-table-column prop="discount" label="折扣" align="center">
            <template #default="scope">
              <span v-show="!scope.row.editFlag">{{ scope.row.discount }}</span>
              <el-input v-show="scope.row.editFlag" v-model="scope.row.discount" placeholder="请输入折扣"
                style="width: 210px;" />
            </template>
          </el-table-column>
          <el-table-column prop="serverType" label="规则类型" align="center">
            <template #default="scope">
              <el-select v-show="!scope.row.editFlag" v-model="scope.row.serverType" filterable clearable remote
                reserve-keyword placeholder="请选择规则类型" :loading="loading" disabled style="width: 210px;">
                <el-option v-for="item in serviceType" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <el-select v-show="scope.row.editFlag" v-model="scope.row.serverType" filterable clearable remote
                reserve-keyword placeholder="请选择规则类型" :loading="loading" style="width: 210px;">
                <el-option v-for="item in serviceType" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="serverId" label="规则类型" align="center">
            <template #default="scope">
              <el-select v-show="!scope.row.editFlag" v-model="scope.row.serverId" filterable clearable remote
                reserve-keyword placeholder="请选择规则类型" :loading="loading" disabled style="width: 210px;">
                <el-option v-for="item in serviceList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <el-select v-show="scope.row.editFlag" v-model="scope.row.serverId" filterable clearable remote
                reserve-keyword placeholder="请选择规则类型" :loading="loading" style="width: 210px;">
                <el-option v-for="item in serviceList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center">
            <template #default="scope">
              <div style="display: flex;justify-content: space-around;">
                <el-button type="text" icon="el-icon-circle-check" v-show="scope.row.editFlag" @click="submit(scope.row)">
                  确定
                </el-button>

                <el-button type="text" icon="el-icon-circle-close" v-show="scope.row.editFlag"
                  @click="cancelRow(scope.row, scope.$index)">
                  取消
                </el-button>
                <el-button icon="el-icon-edit" type="text" v-show="!scope.row.editFlag" @click="editVersion(scope.row)">
                  编辑
                </el-button>
                <el-button icon="el-icon-delete" type="text" v-show="!scope.row.editFlag"
                  @click="delVersion(scope.$index)">
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

/**新增优惠券规则 */
    addCouponDetail() {
      let key = this.couponDetailList.length ? this.couponDetailList[this.couponDetailList.length - 1].isSubmit : null
      if (key || this.couponDetailList.length == 0) {
        this.couponDetailList.push({
          editFlag: true, // 可编辑标识
          isSubmit: false // 是否点击确定标识
        })
      } else {
        this.$message.error(`请先确定上一条数据，才能添加新数据`)
      }
    },
	// 表格确定
    submit(row) {
      if (row) {
        row.editFlag = false
        row.isSubmit = true
      } else {
        this.$message.error('请输入表格')
      }
    },
    // 表格取消
    cancelRow(row, index) {
      row.editFlag = false
      this.couponDetailList.splice(index, 1)
    },
    // 编辑
    editVersion(row) {
      // v.value = JSON.parse(JSON.stringify(row))
      row.editFlag = true
    },
    // 删除
    delVersion( index) {
        this.couponDetailList.splice(index, 1)
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35