Vue element 表格内容上下左右编辑

最新推荐文章于 2024-06-08 10:27:47 发布

原创最新推荐文章于 2024-06-08 10:27:47 发布 · 425 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

该代码示例展示了如何在Vue.js应用中使用ElementUI的el-table组件，结合keydown事件和v-model实现单元格内的文本输入，并通过键盘导航在表格内移动焦点。方法keyMove处理按键事件，根据按键方向改变输入焦点。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" v-slot="scord" label="Date" width="180">
      <input @keydown="keyMove(scord,$event)" type="text"
             :ref='`tableData${scord.column.property}${scord.$index}_ref`'
             v-model="tableData[scord.$index][scord.column.property]">
    </el-table-column>
    <el-table-column prop="name" label="Name" v-slot="scord" width="180">
      <input @keydown="keyMove(scord,$event)" type="text"
             :ref='`tableData${scord.column.property}${scord.$index}_ref`'
             v-model="tableData[scord.$index][scord.column.property]">
    </el-table-column>
    <el-table-column prop="address" v-slot="scord" label="Address">
      <input @keydown="keyMove(scord,$event)"
             :ref='`tableData${scord.column.property}${scord.$index}_ref`'
             v-model="tableData[scord.$index][scord.column.property]">
    </el-table-column>
  </el-table>
</template>

<script>
const tableData = [
  {
    date: '2016-05-031',
    name: 'Tom',
    address: [1, 2, 3, 4, 5],
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: [1, 2, 3, 4, 5],
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: [1, 2, 3, 4, 5],
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: [1, 2, 3, 4, 5],
  },
]
export default {
  data() {
    return {
      tableData
    }
  },
  methods: {
    keyMove(scord, event) {
      if (event.ctrlKey) {
        this.moveFouce(tableData, scord, event.keyCode)
      }
    },
    moveFouce(num, scord, keyCode) {
      var that = this.$refs
      var row = scord.row
      var property = scord.column.property
      var obj = Object.keys(row)
      var index = obj.indexOf(property)
      var dataIndex = scord.$index
      var refName
      switch (keyCode) {
        case 37: // 左箭头
          refName = `tableData${obj[index - 1]}${dataIndex}_ref`
          break
        case 38: // 上箭头
          refName = `tableData${obj[index]}${dataIndex - 1}_ref`
          break
        case 39: // 右箭头
          refName = `tableData${obj[index + 1]}${dataIndex}_ref`
          break
        case 40: // 下箭头
          refName = `tableData${obj[index]}${dataIndex + 1}_ref`
          break
      }
      if (!refName) return
      that[refName].focus()
    }
  }
}
</script>