满口金牙 2022-04-21 13:51 采纳率: 91.5%
浏览 115
已结题

Vue3 实现按下左键 并拖动鼠标选取 多行 或多列的方法 ,求解

疑问?Vue3 下,
在网页中 实现按下左键 并拖动鼠标
同时选取 1单元格 和 2单元格,并返回 index


  <table class="formDesign">
    <tr>
      <td >1单元格</td>
      <td >2单元格</td>
      <td >占位符</td>
      <td >占位符</td>
    </tr>
      <tr>
      <td >占位符</td>
      <td >占位符</td>
      <td >占位符</td>
      <td >占位符</td>
    </tr>
  </table>

注: 我最终的目的是
Vue3 实现按下左键 并拖动鼠标选取 多行 或多列的方法 ,并实现合并单元格 ,

  • 写回答

2条回答 默认 最新

  • 小草的味道 2022-04-21 15:27
    关注

    仅供参考

    <!DOCTYPE html>
    <html lang="en">
    
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>login</title>
            <style>
                #app {
                    width: 100Vh;
                    height: 100Vw;
                }
                table{
                    width: 500px;
                }
            </style>
        </head>
        <body>
            <div id="app">
                <table border="" @mousedown="myClick()" @mouseup="endClick">
                    <tr><th>Header</th></tr>
                    <tr v-for="(item,index) in 10" @mouseout="getTrIndex(index)"><td>Data</td></tr>
                </table>
            </div>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
            <script>
                window.onload = function() {
                    var vm = new Vue({
                        el: "#app",
                        data: {
                            oper:false
                        },
                        methods: {
                            myClick() {
                                this.oper = true
                            },
                            endClick() {
                                this.oper = false
                            },
                            getTrIndex(index){
                                if(this.oper){
                                    console.log(index)
                                }
                            }
                        }
                    })
                }
            </script>
        </body>
    
    </html>
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 5月1日
  • 已采纳回答 4月23日
  • 创建了问题 4月21日

悬赏问题

  • ¥15 关于#matlab#的问题:在模糊控制器中选出线路信息,在simulink中根据线路信息生成速度时间目标曲线(初速度为20m/s,15秒后减为0的速度时间图像)我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写,需写出详细代码,代价私
  • ¥15 ROS系统搭建请教(跨境电商用途)
  • ¥15 AIC3204的示例代码有吗,想用AIC3204测量血氧,找不到相关的代码。