element UI表格使用的练习

element UI表格使用的练习_第1张图片

<template>
  <div>
     <!-- 没用前面单选框的单选表格 -->
     <el-table
      size="mini"
      border
      key="mainTable"
      ref="mainTable"
      :data="list"
      sortable="custom"
      @sort-change="onTableSortChange"
      :default-sort="{ prop: 'ID', order: 'descending' }"
      width="100%"
      style="flex: 1"
      min-height="300"
      height="100%"
      row-key="ID"
      highlight-current-row
      @row-click="onTableRowClick"
      @row-dblclick="onTableRowDblClick"
    >
    </el-table>
    
  </div>
</template>
<script>

export default{
  data(){
    return{
     currentRow:null  // 这个接点击的数据
    }
  },
  methods: {
    // --表格单行点击事件
    onTableRowClick(row) {
     console.log('单击该行的数据',row)
    },
    // --表格行双击事件
    onTableRowDblClick(row) {
     console.log('双击该行的数据',row)
    },
  },
}
</script>

你可能感兴趣的:(笔记部分,javascript,前端,vue.js)