Vue 组件：使用 Element UI 实现表格自由选择功能

<p>{
&quot;title&quot;: &quot;Vue 组件：使用 Element UI 实现表格自由选择功能&quot;,
&quot;description&quot;: &quot;本文介绍如何使用 Vue 和 Element UI 构建一个组件，实现鼠标自由选择表格中的行和列。组件提供了清晰的界面和交互，用户可以通过鼠标移动选择表格内容，并触发相应的事件。&quot;,
&quot;keywords&quot;: &quot;Vue, Element UI, 表格选择, 组件, 鼠标交互&quot;,
&quot;content&quot;: &quot;<template></p>
  <div>
    <div class="table-title">
      <span class="table-select">{{ tableTitleSelect }}</span>
      <span>表格</span>
    </div>
    <div class="table-panel">
      <el-table
        :data="tableData"
        :row-class-name="rowClassName"
        @cell-mouse-enter="onCellMouseEnter"
        @cell-mouse-leave="onCellMouseLeave"
        @cell-click="onCellClick"
      >
        <el-table-column v-for="col in colCount" :key="col" prop="col" label="列" width="50px"></el-table-column>
        <el-table-column v-for="row in rowCount" :key="row" prop="row" label="行" width="50px"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      tableTitleSelect: '插入',
      rowCount: 10,
      colCount: 10,
      tableData: [],
      colIndex: 0,
      rowIndex: 0
    };
  },
  methods: {
    rowClassName({ row, rowIndex }) {
      if (rowIndex < this.rowIndex && row.colIndex < this.colIndex) {
        return 'active';
      }
      return '';
    },
    onCellMouseEnter(row, column) {
      this.colIndex = column.index + 1;
      this.rowIndex = row.index + 1;
      this.tableTitleSelect = `${this.rowIndex}×${this.colIndex}`;
    },
    onCellMouseLeave() {
      this.resetTable();
    },
    onCellClick() {
      this.$emit('table-selected', this.rowIndex, this.colIndex);
      this.resetTable();
    },
    resetTable() {
      this.colIndex = 0;
      this.rowIndex = 0;
      this.tableTitleSelect = '插入';
    }
  },
  created() {
    for (let i = 0; i < this.rowCount; i++) {
      const rowData = {};
      for (let j = 0; j < this.colCount; j++) {
        rowData[`col${j}`] = '';
      }
      rowData.row = i + 1;
      this.tableData.push(rowData);
    }
  }
};
</script>
<style scoped>
.active {
  background-color: lightblue;
}
</style>