Κοινή χρήση τεχνολογίας

element-plus el-table κάνει κλικ στην τρέχουσα σειρά και μετακινεί το ποντίκι για να εμφανιστεί

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Στο στοιχείο el-table του Element Plus, η ρύθμιση του στυλ του ποντικιού κατά την ολίσθηση πάνω από τη σειρά μπορεί να επιτευχθεί μέσω CSS. Μπορείτε να χρησιμοποιήσετε την ιδιότητα δρομέα CSS για να ορίσετε στυλ αλλαγής του ποντικιού. Εδώ είναι ένα απλό παράδειγμα:

Πρώτα, στο στοιχείο Vue

.el-table .el-table__row:hover {
  cursor: pointer; /* 这里可以更改为其他的光标样式,比如 'crosshair', 'help', 'move', 'not-allowed' 等 */
}
  • 1
  • 2
  • 3

Αυτό το CSS θα εφαρμοστεί σε κάθε σειρά (el-table__row) στον el-table σας και το καθορισμένο στυλ δρομέα θα εμφανίζεται όταν το ποντίκι περνάει από πάνω του.

Στη συνέχεια, βεβαιωθείτε ότι το el-table σας αποδίδεται σωστά στο πρότυπο συστατικού σας:

<template>
  <el-table 
   :data="tableData" 
   @current-change="handleSelectionChange"
   style="width: 100%"
   >
    <!-- 你的 el-table-column 定义 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 你的数据数组
      ]
    }
  }
  methord:{
  handleSelectionChange(val) {
          this.multipleSelection = val;
          console.log(val)
          // let api = new ModellingServiceApi()
          // await api.deleteNode({sid: this.psssData.id?this.psssData.id:1,nodeId:this.selectNodeData.nodeId })
        },
  }
}
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

Το παραπάνω είναι ολόκληρο το περιεχόμενο του άρθρου Αν σας αρέσει αυτό το άρθρο, ελπίζω να το υποστηρίξετε τρεις φορές.