iview的表格行内编辑，input和select组件使用方向键切换输入

如果表格中的输入框和下拉框需要实现方向键切换选择，效果如图：

使用的是IView的UI框架和Vue2，核心是在输入框和下拉框上添加按键监听事件，监听按键对应方向应该要完成的操作，比如当前在Name列的第一行，按【向左键】的话，需要鼠标光标在第一行的Address列focus()。

核心代码讲解

keyup按下键盘执行的方法

handleKeyDown(event, row, key, name) {
  // ↑
  if (event.keyCode === 38) {
    // 按向上键需要执行的操作
  }
  // ↓
  if (event.keyCode === 40) {
    // 按向下键需要执行的操作
  }
  // ->
  if (event.keyCode === 39) {
    // 按向右键需要执行的操作
  }
  // <-
  if (event.keyCode === 37) {
    // 按向左键需要执行的操作
  }
},

针对上下方向键，其实就是更改数组的索引值

changeCurrentRow(row, key, type, name) {
  let curIndex = row._index;
  if (type === "+") {
    curIndex = row._index + 1;
  } else {
    curIndex = row._index - 1;
  }
  let changeRow = this.data[curIndex];
  this.$nextTick(() => {
    let e = document.querySelectorAll(`.${key}`)[curIndex];
    e.querySelector(name).focus();
  });
},

完整代码

template模板部分

<template>
  <Table :columns="columns" :data="data">
    <template #input="{ row, column }">
      <div
        :class="column.key"
      >
        <Input
          v-model="row[column.key]"
          @on-keyup="handleKeyDown($event, row, column.key, 'input')"
          @on-blur="changeValue(column, row[column.key], row._index)"
        />
      </div>
    </template>
    <template #select="{ row, column }">
      <Select
        :class="column.key"
        filterable
        @keyup="handleKeyDown($event, row, column.key, '.ivu-select-input')"
        @on-change="changeSelect(column, row[column.key], row._index, row)"
        clearable
        v-model="row[column.key]"
        :placeholder="`请选择${column.title}`"
      >
        <Option
          v-for="item in selectOption"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        />
      </Select>
    </template>
  </Table>
</template>

javascript部分文章来源地址https://www.toymoban.com/news/detail-544377.html

<script>
export default {
  data() {
    return {
      selectOption: [
        {
          value: "1",
          label: "四川省",
        },
        {
          value: "2",
          label: "广东省",
        },
      ],
      columns: [
        {
          title: "Name",
          key: "name",
          slot: "input",
        },
        {
          title: "Age",
          key: "age",
        },
        {
          title: "Address",
          key: "address",
          slot: "select",
        },
        {
          title: "Remark",
          key: "remark",
          slot: "input",
        },
      ],
      data: [
        {
          name: "John Brown",
          age: 18,
          address: "1",
          remark: "",
        },
        {
          name: "Jim Green",
          age: 24,
          address: "2",
          remark: "",
        },
        {
          name: "Joe Black",
          age: 30,
          address: "1",
          remark: "",
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "1",
          remark: "1",
        },
      ],
    };
  },
  methods: {
    changeValue(column, val, index) {
      this.data[index][column.key] = val;
    },
    changeSelect(column, val, index) {
      this.data[index][column.key] = val;
    },
    handleKeyDown(event, row, key, name) {
      // ↑
      if (event.keyCode === 38) {
        if (row._index > 0) {
          this.changeCurrentRow(row, key, "-", name);
        }
      }
      // ↓
      if (event.keyCode === 40) {
        if (row._index + 2 <= this.data?.length) {
          this.changeCurrentRow(row, key, "+", name);
        }
      }
      // ->
      if (event.keyCode === 39) {
        if (key === "name") {
          this.$nextTick(() => {
            let e = document.querySelectorAll(".address")[row._index];
            e.querySelector(".ivu-select-input").focus();
          });
        } else if (key === "address") {
          this.$nextTick(() => {
            let e = document.querySelectorAll(".remark")[row._index];
            e.querySelector("input").focus();
          });
        }
      }
      // <-
      if (event.keyCode === 37) {
        if (key === "remark") {
          this.$nextTick(() => {
            let e = document.querySelectorAll(".address")[row._index];
            e.querySelector(".ivu-select-input").focus();
          });
        } else if (key === "address") {
          this.$nextTick(() => {
            let e = document.querySelectorAll(".name")[row._index];
            e.querySelector("input").focus();
          });
        }
      }
    },
    changeCurrentRow(row, key, type, name) {
      let curIndex = row._index;
      if (type === "+") {
        curIndex = row._index + 1;
      } else {
        curIndex = row._index - 1;
      }
      let changeRow = this.data[curIndex];
      this.$nextTick(() => {
        let e = document.querySelectorAll(`.${key}`)[curIndex];
        e.querySelector(name).focus();
      });
    },
  },
};
</script>

到了这里，关于iview的表格行内编辑，input和select组件使用方向键切换输入的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！