weixin_39760919
2021-01-07 10:21 阅读 2

能否提供简单的通过上下键切换高亮行, 并且能够带动滚动条

这个需求解决了什么问题 What problem does this feature solve

我在utools这个工具里做个一个小的插件, 大概的功能如下图 ec8XY6.png 即通过关键字搜索出硬盘上的文件, 每一行都是一个路径. 既然搜出来的是文件, 那么通过上下键来选择自己想要的文件然后回车打开应该就是一个很自然的动作了. 但是在使用上下键进行选择的时候发现vex-table提供的键盘操作并不能使用, 琢磨一下发现是可编辑的table类型才能使用. 所以希望能提供这种使用上下键直接移动高亮行的方法.

建议的 API 是什么样的 What does the proposed API look like

在table上加上一个SimpleKeyControl这样的属性来表示开启这个功能?

是否已有其他不错的替代方案 Describe alternatives you've considered

我目前使用document.onKeyDown的方式来监听键盘事件, 使用setCurrentRow来切换高亮行, 本来这样也应该能实现效果, 但是这样导致向下移动到超出可视范围的时候, 滚动条并不会跟着一起向下滑动, 应该是键盘监听事件覆盖了这个操作, 现在就很尴尬了, 因为如果再监控页面行高度来找到当前页面高度再手动滚动滚动条, 整个逻辑就会变得复杂, 也有可能时我没有发现正确的用法?


document.onkeydown = (e) => {
        var keyCode = window.event ? e.keyCode : e.which
        if (keyCode === 13) {
          this.loading = true
          utools.setExpendHeight(550)
          this.search(this.query)
          this.currentPosition = 0
        } else if (keyCode == 38) {
          console.log('up')
          var position = this.currentPosition - 1 < 0 ? 0 : this.currentPosition - 1
          this.currentPosition = position
          this.$refs.xTable.setCurrentRow(this.data[position])
        } else if (keyCode == 40) {
          console.log('down')
          var position = this.currentPosition + 1 > this.data.length - 1 ? this.data.length - 1 : this
            .currentPosition + 1
          this.currentPosition = position
          this.$refs.xTable.setCurrentRow(this.data[position])
        }
      }

版本 Version

  • os: mac
  • browser: chrome 最新, 不同考虑其他浏览器
  • vue: 2.6.10
  • vxe-table: 当前官网最新的

该提问来源于开源项目:x-extends/vxe-table

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

12条回答 默认 最新

  • weixin_39557576 weixin_39557576 2021-01-07 10:21

    建议更新试下 https://xuliangzhan_admin.gitee.io/vxe-table/#/table/advanced/keyboard

    点赞 评论 复制链接分享
  • weixin_39760919 weixin_39760919 2021-01-07 10:21

    建议更新试下 xuliangzhan_admin.gitee.io/vxe-table/#/table/advanced/keyboard

    这个方法我之前看到了, 但是使用的时候似乎没有起作用, 上下方向键按下的时候还是操作的滚动条. 下面是我的demo代码, 不知道是不是哪里配置错了? 我是直接放在谷歌浏览器最新版里运行的, 控制台也没有任何报错信息.

    javascript
    
    
    
      <title>find</title>
      <script src="js/vue.min.js"></script>
      <!-- 引入样式 -->
      <link rel="stylesheet" href="https://unpkg.com/vxe-table.0.10/lib/index.css">
      <!-- 引入脚本 -->
      <script src="js/vxe-table-utils.js"></script>
      <script src="https://unpkg.com/vxe-table.0.10/lib/index.min.js"></script>
      <style>
        body {
          margin: 0;
          padding: 0;
        }
      </style>
    
    
    
      <div id="app">
        <vxe-table ref="xTable" border resizable highlight-current-row height="500" :keyboard-config="{isArrow: true}">
          <vxe-table-column type="index" width="60"></vxe-table-column>
          <vxe-table-column field="name" title="Name"></vxe-table-column>
          <vxe-table-column field="sex" title="Sex"></vxe-table-column>
          <vxe-table-column field="age" title="Age"></vxe-table-column>
          <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>
        </vxe-table>
      </div>
    
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            data: []
          }
        },
        mounted() {
          for (var i = 0; i < 100000; i++) {
            this.data.push({
              name: "zhang",
              sex: "nan",
              age: 23,
              address: "123"
            })
          }
          this.$refs.xTable.loadData(this.data)
        },
        methods: {}
      })
    </script>
    
    
    点赞 评论 复制链接分享
  • weixin_39752941 weixin_39752941 2021-01-07 10:21

    不是这样的发代码的,你应该提供在线链接 https://jsfiddle.net/w8q6unes/ https://codesandbox.io/s/vue-template-916h0 https://jsrun.net/vIyKp/edit

    点赞 评论 复制链接分享
  • weixin_39760919 weixin_39760919 2021-01-07 10:21

    不是这样的发代码的,你应该提供在线链接 jsfiddle.net/w8q6unes codesandbox.io/s/vue-template-916h0 jsrun.net/vIyKp/edit

    抱歉, 因为这几个平台在国内不好访问, 以前我发这些链接别人都打不开, 所以久而久之我也没这个习惯了, 发一些别人打不开的网站, 再好用也变得不方便了. https://jsfiddle.net/lanyuanxiaoyao/s3dt4n5w/7/

    点赞 评论 复制链接分享
  • weixin_39557576 weixin_39557576 2021-01-07 10:21

    你更新版本看下 https://jsfiddle.net/e0tf34nb/1/

    点赞 评论 复制链接分享
  • weixin_39760919 weixin_39760919 2021-01-07 10:21

    你更新版本看下 jsfiddle.net/e0tf34nb/1

    ✌新版本没有问题了, 正常了

    点赞 评论 复制链接分享
  • weixin_39963819 weixin_39963819 2021-01-07 10:21

    这东西上下键操作之后,选中哪行怎么监听呢?

    点赞 评论 复制链接分享
  • weixin_39760919 weixin_39760919 2021-01-07 10:21

    你更新版本看下 jsfiddle.net/e0tf34nb/1

    我还想问一下, 没有highlight-row-change这样的事件吗, 上下移动的时候触发事件, 现在api里似乎只有滚动事件和鼠标点击切换高亮行的事件, 并不能在用方向键上下移动的时候获取移动后的行

    点赞 评论 复制链接分享
  • weixin_39557576 weixin_39557576 2021-01-07 10:21

    https://xuliangzhan_admin.gitee.io/vxe-table/#/table/api?filterName=current-change

    点赞 评论 复制链接分享
  • weixin_39760919 weixin_39760919 2021-01-07 10:21

    xuliangzhan_admin.gitee.io/vxe-table/#/table/api?filterName=current-change

    这个事件是在鼠标点击行并且使其高亮的时候才会触发的, 直接点击上下键来移动高亮行是不会触发这个事件的

    点赞 评论 复制链接分享
  • weixin_39557576 weixin_39557576 2021-01-07 10:21

    用户行为都会触发的 https://jsfiddle.net/7abt0Leg/

    点赞 评论 复制链接分享
  • weixin_39760919 weixin_39760919 2021-01-07 10:21

    用户行为都会触发的 https://jsfiddle.net/7abt0Leg/

    https://jsfiddle.net/lanyuanxiaoyao/kuxoeg6r/ 我仅仅只是把版本换到了2.0.14, 应该是这个版本有这个问题

    点赞 评论 复制链接分享

相关推荐