vue表格可编辑

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

 

 

页面代码

<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