elementUi 可编辑表格

最新推荐文章于 2025-04-15 10:14:29 发布

原创最新推荐文章于 2025-04-15 10:14:29 发布 · 560 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #前端 #javascript

文章描述了在Vue应用中如何使用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)
    },