el-table 可编辑的列表

一、图示

1、列表有值，默认选中，字段（测试6）显示列表订单状态

15001675060064_.pic.jpg

2、列表操作列，可以点击删除（状态改变为删除)

15021675060104_.pic.jpg
15041675060116_.pic.jpg

3、如果取消选择，状态恢复原状态

15061675060136_.pic.jpg

4、如果点击复选框按钮改为不选中，可以通过点击删除改变状态的同时，选中这一行 15101675060221_.pic.jpg

5、选中的可以编辑，不选中的不能编辑

15141675060247_.pic.jpg
15141675060247_.pic.jpg

6、点击加号，新增一行，初始非选中状态，点击删除，前端直接删除，不改变状态

15211675060315_.pic.jpg

二、代码

1、结构

is_onchange是根据权限，有些数据是不能选中的，不能操作

 <i
      @click="addRow(1)"
      class="el-icon-circle-plus"
      style="margin-left: 20px; font-size: 20px; color: #0d7583"
 ></i>
 <el-table
      border
      ref="multipleTable1"
      :data="tablelist"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="tableClick"
    >
      <el-table-column type="selection" :selectable="selectable" width="55">
      </el-table-column>
      <el-table-column label="标题一">
        <el-table-column prop="ceshi1" label="测试1" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="ceshi2" label="测试2" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="ceshi3" label="测试3" show-overflow-tooltip>
        </el-table-column>
      </el-table-column>
      <el-table-column label="标题二">
        <el-table-column label="测试4" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-select
              :disabled="eventChange(scope.row, 1)"
              style="width: 100%"
              v-model="scope.row.ceshi4"
              clearable
              placeholder="请选择"
              @change="change($event)"
            >
              <el-option
                v-for="item in selectList1"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="测试5" width="150px">
          <template slot-scope="scope">
            <el-input-number
              style="width: 100%"
              :disabled="eventChange(scope.row, 1)"
              v-model="scope.row.ceshi5"
              :min="20"
              :max="32768"
              controls-position="right"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column width="150px" label="测试6" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.isAdd"
              size="small"
              class="table_button"
              icon="el-icon-delete"
              @click="delRow(scope.row, scope.$index, 1)"
            ></el-button>
            <span
              class="table_btn_text"
              v-if="scope.row.cmd && !scope.row.isAdd"
              >{{ scope.row.cmd }}</span
            >
            <!--  !scope.row.isAdd &&
                scope.row.cmd != '删除' &&
                scope.row.is_onchange != 1 -->
            <el-button
              v-if="
                !scope.row.isAdd &&
                scope.row.cmd != '删除'
              "
              size="small"
              class="table_button"
              icon="el-icon-delete"
              @click="toggleSelection(scope.row, 1, scope.$index)"
            ></el-button>
            <!--   (!scope.row.isAdd && scope.row.cmd == '删除') ||
                scope.row.is_onchange == 1-->
            <el-button
              v-if="
                !scope.row.isAdd && scope.row.cmd == '删除')
              "
              size="small"
              class="table_cacl_button"
              icon="el-icon-delete"
            ></el-button>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>

2、数据

selectList1: [
        {
          value: "1",
          label: "测试数据1",
        },
      ],
      list1: [],
      tablelist: [
        {
          cmd: "修改",
          sheetid: "001",
          ceshi1: "1",
          ceshi2: "2",
          ceshi3: "3",
          ceshi4: "",
          ceshi5: undefined,
          isAdd: false,
         // is_onchange:2
        },
        {
          cmd: "删除",
          sheetid: "002",
          ceshi1: "1",
          ceshi2: "2",
          ceshi3: "3",
          ceshi4: "",
          ceshi5: undefined,
          isAdd: false,
          //is_onchange:2
        },
      ],

3、逻辑

 created() {
    this.tablelist.forEach((item) => {
      item.cmd2 = item.cmd;
      this.toggleSelection2(item, 1);
    });
  },
 methods: {
    toggleSelection2(row, i, index) {
      this.$nextTick(function () {
        if (row.cmd) {
          this.$refs["multipleTable" + i].toggleRowSelection(row);
        }
      });
    },
    //强制更新视图 下拉
    change(e) {
      this.$forceUpdate();
    },
    delRow(row, index, num) {
      this.tablelist.splice(index, 1);
    },
    selectable(row, index) {
     // if (row.is_onchange == 1) {
       // return false;
     // } else {
       // return true;
      //}
    },
    addRow(num) {
      let item;
      let ids = new Date().getTime();
      item = {
        cmd: "新增",
        ceshi1: "1",
        ceshi2: "2",
        ceshi3: "3",
        ceshi4: "",
        ceshi5: undefined,
        isAdd: true,
        ids: ids,
      };
      this.tablelist.push(item);
    },
    tableClick(val, item) {
      this.list1 = val;
    },

    toggleSelection(row, i, index) {
      if (this["list" + i].indexOf(row) == -1) {
        this.$refs["multipleTable" + i].toggleRowSelection(row);
        row.cmd = "删除";
      } else {
        row.cmd = "删除";
        this.$set(this["list" + i], index, row);
      }
    },
    eventChange(row, num) {
      if (this["list" + num].indexOf(row) == -1) {
        if (!row.sheetid) {
          row.cmd = "新增";
        } else {
          row.cmd = row.cmd2;
        }
      }
      return this["list" + num].indexOf(row) == -1;
    },
}