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>
/**新增优惠券规则 */
    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)
    },
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ElementUI提供了一种简单而优雅的方式来实现可编辑的表格。通过使用ElementUI的Table组件,我们可以轻松地将单元格设置为可编辑状态,并在用户进行编辑时触发相应的事件。[1] 首先,我们需要在Table组件上设置editable属性为true,以启用可编辑功能。然后,我们可以使用scoped-slot来自定义每个单元格的编辑模式和展示模式。在编辑模式下,我们可以使用Input组件来让用户输入内容。而在展示模式下,我们可以直接显示单元格的值。 在确定和取消事件方面,我们可以通过监听Table组件的row-click事件来判断用户是点击了确定还是取消按钮。当用户点击确定时,我们可以将输入框设置为不可编辑状态,并显示编辑和删除按钮。而当用户点击取消时,我们可以回显上一次输入的数据。 总的来说,ElementUI提供了一整套完善的可编辑表格方案,包括添加、编辑、删除和回显功能。通过合理使用Table组件的属性和事件,我们可以轻松地实现这些功能,并提供良好的用户体验。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [优雅的elementUI table单元格可编辑实现方法详解](https://download.csdn.net/download/weixin_38691669/12948236)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [elementui编辑表格](https://blog.csdn.net/fortunate_leixin/article/details/127675925)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值