标签：index vue 表格 item removeTargetIds id 编辑 let tableData

需求：实现可新增，可编辑，可（批量）删除，操作完后统一保存，删完要保存，不然刷新数据还在

页面代码

<template>
  <div>
    <div class="moreContain">

      <el-card style="margin-bottom: 84px"
        ><el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="delMore"
              >删除</el-button
            >
          </el-col>
        </el-row>
        <el-table
          :data="tableData"
          v-loading="loading"
          class="inputTab"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="序号" align="center" type="index" />
          <el-table-column label="*词一" prop="errorWord" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.errorWord"
                type="textarea"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="词二" prop="matchWord" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.matchWord"
                type="textarea"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="词三" prop="filterWord" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.filterWord"
                type="textarea"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="词四" prop="excludeWord" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.excludeWord"
                type="textarea"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="词五" prop="adviceWord" align="center">
            <template slot-scope="scope">
              <el-input
                v-model.trim="scope.row.adviceWord"
                type="textarea"
                @keydown.native="keydown($event)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="词六" prop="description" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.description"
                type="textarea"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row, scope)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="footerAdd" style="margin-top: 10px">
          <el-button type="primary" @click="addOneLine">新增一行</el-button>
          <el-button type="primary" @click="addTenLine">新增十行</el-button>
        </div>
      </el-card>
    </div>
    <div class="footer">
      <el-button @click="sureAdd" type="primary">确定</el-button>
      <el-button @click="cancelSure">取消</el-button>
    </div>
  </div>
</template>

<script>
import {
  getTabDataApi,
  sureAddApi,
} from "@/api/wordmanage/components/portWord";

export default {
  name: "",
  data() {
    return {
      tableData: [],
      multiple: true,
      loading: false,
      ids: [],
      // 新增的数据 -->无id
      addTargets: [],
      // 更新的数据--->有id
      modifyTargets: [],
      // 需要删除的数据id
      removeTargetIds: [],
      idArr: [],
    };
  },
  created() {
    this.getTabData();
  },
  methods: {
    // 禁止输入空格
    keydown(e) {
      if (e.keyCode == 32) {
        e.returnValue = false;
      }
    },
    // 获取列表数据
    async getTabData() {
      this.loading = true;try {
        let res = await getTabDataApi();
        if (res.code == 200) {
          this.tableData = res.rows;
          this.tableData.map((item, index) => {
            item.index = index;
          });
          this.loading = false;
        } else {
          this.msgError(res.msg);
        }
      } catch (error) {
        console.log(error);
      }
    },
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.index);
      this.idArr = selection.map((item) => item.id);
      this.multiple = !selection.length;
    },
    // 单行删除
    handleDelete(row, scope) {
      if (row.id) {
        // 有数据
        this.tableData.map((item, index) => {
          if (item.id == row.id) {
            this.tableData.splice(index, 1);
            this.removeTargetIds.push(item.id);
            this.$forceUpdate();
          }
        });
      } else {
        // 空行
        this.tableData.splice(scope.$index, 1);
        // this.$forceUpdate();
      }
    },
    // 批量删除
    delMore() {
      console.log("ids", this.ids);
      this.tableData.map((item, index) => {
        this.ids.map((i) => {
          if (item.index == i) {
            this.tableData.splice(index, this.ids.length);
            this.removeTargetIds = [...this.removeTargetIds, ...this.idArr];
            this.$forceUpdate();
          }
        });
      });
    },
    // 保存
    async sureAdd() {
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].id) {
          // 更新的数据--->有id
          let aa = {
            errorWord: this.tableData[i].errorWord,
            matchWord: this.tableData[i].matchWord,
            filterWord: this.tableData[i].filterWord,
            excludeWord: this.tableData[i].excludeWord,
            adviceWord: this.tableData[i].adviceWord.replace(/\s*/g, ""),
            description: this.tableData[i].description,
            id: this.tableData[i].id,
          };
          this.modifyTargets.push(aa);
        } else {
          // 新增的数据 -->无id
          let bb = {
            errorWord: this.tableData[i].errorWord,
            matchWord: this.tableData[i].matchWord,
            filterWord: this.tableData[i].filterWord,
            excludeWord: this.tableData[i].excludeWord,
            adviceWord: this.tableData[i].adviceWord.replace(/\s*/g, ""),
            description: this.tableData[i].description,
            id: this.tableData[i].id,
          };
          this.addTargets.push(bb);
        }
      }
      let params = {
        wordGroupId: this.$route.query.id,
        addTargets: this.addTargets,
        modifyTargets: this.modifyTargets,
        removeTargetIds: this.removeTargetIds,
      };
      try {
        let res = await sureAddApi(params);
        if (res.code == 200) {
          this.msgSuccess("保存成功");
          this.wordGroupId = [];
          this.addTargets = [];
          this.modifyTargets = [];
          this.removeTargetIds = [];
          this.getTabData();
        } else {
          this.msgError(res.msg);
          this.wordGroupId = [];
          this.addTargets = [];
          this.modifyTargets = [];
          this.removeTargetIds = [];
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 取消保存
    cancelSure() {
      this.$nextTick((_) => {
        this.getTabData();
      });
    },
    // 新增一行
    addOneLine() {
      let newLine = {
        id: "",
        errorWord: "",
        matchWord: "",
        filterWord: "",
        excludeWord: "",
        adviceWord: "",
        description: "",
        index: this.tableData.length,
      };
      this.tableData.push(newLine);
    },
    // 新增十行
    addTenLine() {
      for (let i = 0; i < 10; i++) {
        this.addOneLine();
      }
    },
  },
};
</script>

<style scoped lang="scss">
// ::v-deep.inputTab .el-textarea__inner {
//   resize: both;
// }
.moreContain {
  width: 100%;
  overflow: hidden;
  padding: 20px 5%;
  box-sizing: border-box;
}
.infoList {
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding: 10px 0px;
  box-sizing: border-box;
  li {
    display: inline-block;
    margin-right: 8%;
    vertical-align: middle;
    img {
      display: inline-block;
      vertical-align: middle;
      margin-right: 4px;
      width: 16px;
    }
  }
}
.footerAdd {
  width: 100%;
  overflow: hidden;
  line-height: 40px;
  text-align: center;
}
.footer {
  width: 100%;
  background: #fff;
  height: 84px;
  line-height: 84px;
  overflow: hidden;
  position: fixed;
  bottom: 0px;
  text-align: center;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  z-index: 100;
}
</style>

二：接口传的参数类型（post）

标签：index,vue,表格,item,removeTargetIds,id,编辑,let,tableData
来源： https://www.cnblogs.com/guohanting/p/16575396.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。