el-table前端批量删除

最新推荐文章于 2024-04-22 16:00:31 发布

原创最新推荐文章于 2024-04-22 16:00:31 发布 · 635 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #elementui #vue.js

本文介绍如何在Vue.js项目中使用Element UI组件库实现表格数据的批量删除功能。通过展示具体代码实现，详细解释了操作过程和关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

代码：

template:
<el-table class="tipsTable" 
            @click.stop
              ref="tipsTable"
              :data="formDetail.tipsTable" 
              highlight-current-row
              @selection-change="handleSelectionChange"
              :header-cell-style="{ color: 'rgba(51, 51, 51, 1)',background: '#F6F7F9'}">
              <el-table-column v-if="formDetail.status == 1 || formDetail.status == 5" type="selection" width="60" align="center" />
              <el-table-column type="index" label="序号" width="80" align="center" />
              <el-table-column label="提示语" prop="tip">
                <template #default="{row}">
                  <el-input v-if="formDetail.status == 1 || formDetail.status == 5" 
                    style="width:100%" 
                    v-model="row.tip" 
                    placeholder="" />
                  <div v-else>{{row.tip}}</div>
                </template>
              </el-table-column>
              <el-table-column label="必填设置" prop="radio" width="150">
                <template #default="{row}">
                  <div v-if="formDetail.status == 1 || formDetail.status == 5">
                    <el-checkbox v-model="row.checked" label="1">{{}}</el-checkbox>
                    <span>设为必填项</span>
                  </div>
                  <div v-else>{{row.checked ? '必填项' : '非必填项'}}</div>
                </template>
              </el-table-column>
            </el-table>

script:
multipleSelection: null,
handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 报名内容设置-删除一条提示
    delTips() {
      if(this.multipleSelection && this.multipleSelection.length) {
        this.multipleSelection.forEach((item) => {
          this.formDetail.tipsTable.forEach((data,i) => {
            if(item.tip == data.tip) {
              this.formDetail.tipsTable.splice(i, 1)
            }
          })
        })
      } else {
        this.$message.warning('请选择需要删除的选项')
      }
    },