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 实现按下左键 并拖动鼠标选取 多行 或多列的方法 ，并实现合并单元格 ，

仅供参考

<!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>

合并列？列中内容怎么处理？