iview的表格实现单元格行编辑功能

iview的表格实现单元格行编辑功能

截图：

实现功能：

• 可分页批量编辑并保存

• 输入框支持上下键换行编辑

实现方式

使用插槽

<template>
  <layout :footerHeight="0">
    <template #Opration>
      <div
        style="
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        "
      >
        <Button size="small" @click="cancelBatchEdit()" style="margin: 0 5px" v-if="age_is_edit"
          >取消批量编辑</Button
        >
        <Button type="primary" size="small" @click="batchEdit()" style="margin: 0 5px" v-else
          >批量编辑</Button
        >
        <Button type="primary" size="small" @click="batchSave()" style="margin: 0 5px"
          >批量保存</Button
        >
      </div>
    </template>
    <template #main>
      <div
        style="
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        "
      >
        <div style="height: 92%; overflow: auto">
          <Table
            :data="results"
            style="display: flex;height: 100%;"
            :columns="[
              {
                title: '序号',
                name: '序号',
                key: 'index',
                width: 90,
              },
              {
                title: '年龄',
                name: '年龄',
                key: 'age',
                isShow: 1,
                width: 200,
                resizable: 1,
                sortable: 1,
                slot: 'edit',
              },
              {
                title: '备注',
                name: '备注',
                key: 'remark',
                isShow: 1,
                width: 200,
                resizable: 1,
                sortable: 1,
              },
            ]"
          >
            <template #edit="{ row, column }">
              <div
				:class="column.key"
                style="
                  cursor: pointer;
                  min-width: 120px;
                  min-height: 48px;
                  display: flex;
                  align-items: center;
                "
              >
                <template v-if="age_is_edit">
                  <YsInput
					@keyup.native="handleKeyup($event, row, column.key)"
                    v-model="row[column.key]"
                    @on-blur="changeValue(row, column, row[column.key], row._index)"
                  />
                </template>
                <template v-else>
                  <span>{{ row[column.key] }}</span>
                </template>
              </div>
            </template>
          </Table>
        </div>
        <div
          style="
            width: 100%;
            height: 8%;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <span>共 {{ page.total }} 条</span>
          <Page
            :current.sync="args.page_para.page_index"
            :total="page.total"
            :page-size-opts="pageSizeOpts"
            show-sizer
            @on-page-size-change="handlePageSizeChange"
            @on-change="handlePageChange"
          />
        </div>
      </div>
    </template>
  </layout>
</template>

<script>
import { differenceWith, isEqual, cloneDeep } from "lodash";
export default {
  data() {
    return {
      age_is_edit: false,
      pageSizeOpts: [10, 20, 30, 40],
      args: {
        conditions: {
        },
        page_para: {
          page_index: 1,
          page_size: 10,
        },
      },
      page: {
        total: 0,
        currnt: 1,
        pageSize: 10,
      },
      results: [],
      originalResults: [],
      editResults: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    cancelBatchEdit() {
      this.age_is_edit = false;
      this.args.page_para.page_index = 1;
      this.getData(1);
    },
    batchEdit() {
      this.age_is_edit = true;
    },
    async batchSave() {
      let data = differenceWith(this.editResults, this.originalResults, isEqual);
      data = cloneDeep(data);
      let reg = /^[0-9]*[1-9][0-9]*$/;
      this.batchSaveService.args.t_list = [];
      if (data?.length) {
        for (let i in data) {
          if (data[i].age && !reg.test(data[i].age)) {
            this.$Message.warning(`第${data[i].index}行的年龄请输入数字！`);
            return false;
          }
        }
        this.age_is_edit = false;
        await this.$http(data);
        this.$Nessage.success("操作成功!");
        this.args.page_para.page_index = 1;
        this.getData(1);
      } else {
        this.$Message.info("无操作数据!");
      }
    },
		handleKeyup(event, row, key) {
			// ↑
			if (event.keyCode === 38) {
				if (row._index > 0) {
					this.changeCurrentRow(row, key, "-");
				}
			}
			// ↓
			if (event.keyCode === 40) {
				if (row._index + 2 <= this.page.pageSize) {
					this.changeCurrentRow(row, key, "+");
				}
			}
		},
		changeCurrentRow(row, key, type) {
			let curIndex = row._index;
			if (type === "+") {
				curIndex = row._index + 1;
			} else {
				curIndex = row._index - 1;
			}
			this.$set(this.results, row._index, row);
			let changeRow = this.results[curIndex];
			this.$set(this.results, curIndex, changeRow);
			this.$nextTick(() => {
				let e = document.querySelectorAll(`.${key}`)[curIndex];
				e.querySelector('input').focus();
			});
		},
    async getData(flag = 0) {
      if (flag === 1) {
        this.editResults = [];
        this.originalResults = [];
      }
      let res = await this.$http({});
      this.page.total = res.total;
      let [pageIndex, pageSize] = [this.args.page_para.page_index, this.args.page_para.page_size];
      if (res.total > 0) {
        res.result.forEach((item, index) => {
          // 序号
          this.$set(item, "index", ((pageIndex - 1) * pageSize) + index + 1);
          this.$set(item, "age_is_edit", false);
        });
      }
      if (this.editResults.length < pageIndex * pageSize) {
        // 当前表格显示数据
        this.results = res.result;
        // 编辑数据
        this.editResults.push(...res.result);
        // 原始数据
        this.originalResults.push(...cloneDeep(res.result));
      } else {
        this.results = this.editResults.slice((pageIndex - 1) * pageSize, pageIndex * pageSize);
      }
    },
    changeValue(row, column, val, index) {
      if (val) {
        if (!/^[0-9]*[1-9][0-9]*$/.test(val)) {
          this.$Message.warning("请输入数字!");
          this.results[index][column.key] = val;
        } else {
          this.results[index][column.key] = parseFloat(val);
        }
      }
    },
  },
};
</script>

使用render函数

<template>
  <layout>
    <template #main>
      <div
        style="
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        "
      >
        <div style="height: 92%; overflow: auto">
          <Table
            :data="results"
            style="display: flex;height: 100%;"
            :columns="[
              {
                title: '序号',
                name: '序号',
                key: 'index',
                width: 90,
              },
              {
                title: '年龄',
                name: '年龄',
                key: 'age',
                isShow: 1,
                width: 200,
                resizable: 1,
                sortable: 1,
                render: render,
              },
              {
                title: '备注',
                name: '备注',
                key: 'remark',
                isShow: 1,
                width: 200,
                resizable: 1,
                sortable: 1,
              },
            ]"
          >
          </Table>
        </div>
        <div
          style="
            width: 100%;
            height: 8%;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <span>共 {{ page.total }} 条</span>
          <Page
            :current.sync="args.page_para.page_index"
            :total="page.total"
            :page-size-opts="pageSizeOpts"
            show-sizer
            @on-page-size-change="handlePageSizeChange"
            @on-change="handlePageChange"
          />
        </div>
      </div>
    </template>
  </layout>
</template>

<script>
export default {
  data() {
    return {
      age_is_edit: false,
      pageSizeOpts: [10, 20, 30, 40],
      args: {
        conditions: {
        },
        page_para: {
          page_index: 1,
          page_size: 10,
        },
      },
      page: {
        total: 0,
        currnt: 1,
        pageSize: 10,
      },
      results: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    render(h, { row, column, index }) {
      return (
        <div 
          style="cursor: pointer"
          vOn:click={(e) => {
          this.changeIndex(e, index, row)
        }}>
          {!row.nameIsEdit ? (
            <span>{row[column.key]}</span>
          ) : (
            <Input vModel={row[column.key]} vOn:on-blur={() => this.changeValue(row, column, row[column.key], index)} />
          )}
        </div>
      )
    },
    async getData(flag = 0) {
      let res = await this.$http({});
      if (res.total > 0) {
        res.result.forEach((item) => {
          this.$set(item, 'nameIsEdit', false);
        });
      }
     this.results = res.result;
    },
    changeValue(row, column, val, index) {
      this.$set(row, 'nameIsEdit', false);
      results[index][column.key] = val
    },
    changeIndex(e, index, row) {
      this.flag = false;
      this.$set(row, 'nameIsEdit', true);
      //实现点击后输入框自动聚焦
      this.$nextTick(() => {
        e.currentTarget.getElementsByTagName("input")[0].focus();
      });
    },
  },
};
</script>