记录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) {
// 把每一行的索引放进,自己记rowindex
row.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)
{
// 把每一行的索引放进,自己记rowindex
row.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>