深圳制作手机网站,网站年费怎么做分录,旅游网站建设风险,佛山vi设计记录element-plus 表格的使用。方法、事件、属性的使用。因为是vue3的方式用到了const install getCurrentInstance();才能获取表格的相关信息
没解决怎么获取选中的行的行号#xff0c;采用自己记的方式实习的。
利用row-class-namesetRowClass实现样式的简单…记录element-plus 表格的使用。方法、事件、属性的使用。因为是vue3的方式用到了const install getCurrentInstance();才能获取表格的相关信息
没解决怎么获取选中的行的行号采用自己记的方式实习的。
利用row-class-namesetRowClass实现样式的简单设定 templateh2表格的方法、事件、属性的使用/h2el-button typeprimary clicksetSelectedsetSelected 1/el-buttonel-button typeprimary clickclearSelectedclearSelected/el-buttonel-table reftableRef :datatableData border stylewidth: 100% highlight-current-row:row-class-namesetRowClass row-clickrow_clickedel-table-column typeindex label序号 width100 /el-table-column propdate labelDate width180 /el-table-column propname labelName width180 /el-table-column propaddress labelAddress //el-table
/templatescript langts
import { defineComponent, reactive, ref, getCurrentInstance, } from vueexport 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 langts setup
import { getCurrentInstance, reactive, ref } from vueconst 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
