网站设计与管理的软件数据分析网站html模板下载

记录element-plus 表格的使用。方法、事件、属性的使用。因为是vue3的方式用到了const install = getCurrentInstance();才能获取表格的相关信息

没解决怎么获取选中的行的行号，采用自己记的方式实习的。

利用row-class-name="setRowClass"实现样式的简单设定

<template><h2>表格的方法、事件、属性的使用</h2><el-button type="primary" @click="setSelected">setSelected 1</el-button><el-button type="primary" @click="clearSelected">clearSelected</el-button><el-table ref="tableRef" :data="tableData" border style="width: 100%" highlight-current-row:row-class-name="setRowClass" @row-click="row_clicked"><el-table-column type="index" label="序号" width="100" /><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table>
</template><script lang="ts">
import { defineComponent, reactive, ref, getCurrentInstance, } from 'vue'export default {setup() {const install = getCurrentInstance();const tableRef = ref();const curIndex = ref(0);const tableData = reactive([{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},]);function setSelected() {console.log('setSelected');curIndex.value = 1;install.refs.tableRef.setCurrentRow(tableData[1]);}function clearSelected() {console.log('clearSelected')//清除选中的项 用于单选表格，设定某一行为选中行， 如果调用时不加参数，则会取消目前高亮行的选中状态install.refs.tableRef.setCurrentRow();curIndex.value = -1;}function setRowClass(row) {// 把每一行的索引放进,自己记rowindexrow.row.my_index = row.rowIndex;if (row.rowIndex == curIndex.value) {return "myClass";}}function row_clicked(row, column, event) {//获取行号不行。。。。//利用自己记的my_index实现curIndex.value = row.my_index;console.log('row_clicked', row.my_index, row.date, row.name, row.address);}return { tableData, tableRef, curIndex, setSelected, clearSelected, setRowClass, row_clicked }},}
</script><!-- 
<script lang="ts" setup >
import { getCurrentInstance, reactive, ref } from 'vue'const install = getCurrentInstance();
const tableRef = ref();
const curIndex = ref(0);const tableData = reactive([{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},
])function setSelected()
{console.log('setSelected');curIndex.value =  1;install.refs.tableRef.setCurrentRow(tableData[1]);}
function clearSelected()
{console.log('clearSelected')//清除选中的项 用于单选表格，设定某一行为选中行， 如果调用时不加参数，则会取消目前高亮行的选中状态install.refs.tableRef.setCurrentRow(); curIndex.value =  -1;
}function setRowClass(row)
{// 把每一行的索引放进,自己记rowindexrow.row.my_index = row.rowIndex;if (row.rowIndex == curIndex.value){return "myClass";}
}function row_clicked(row, column, event)
{//获取行号不行。。。。//利用自己记的my_index实现curIndex.value =  row.my_index;console.log('row_clicked',row.my_index, row.date,row.name,row.address);
}</script> 
--><style >
.myClass {background-color: rgb(16, 95, 95) !important;color: blueviolet;
}
</style>