吧网站做软件的软件,鼓楼福州网站建设,阳性最新消息,wordpress菜单调用官方地址#xff1a;添加链接描述 官方给出的多选带checkbox#xff0c;单选直接选中当前行高亮#xff0c;有时候不想要单行高亮#xff0c;想要带checkbox的单选#xff0c;需要对多选进行改造 官方给的多选例子#xff1a; templateel-tablerefmult…官方地址添加链接描述 官方给出的多选带checkbox单选直接选中当前行高亮有时候不想要单行高亮想要带checkbox的单选需要对多选进行改造 官方给的多选例子 templateel-tablerefmultipleTableRef:datatableDatastylewidth: 100%selection-changehandleSelectionChangeel-table-column typeselection width55 /el-table-column labelDate width120template #defaultscope{{ scope.row.date }}/template/el-table-columnel-table-column propertyname labelName width120 /el-table-column propertyaddress labelAddress show-overflow-tooltip //el-table!-- div stylemargin-top: 20pxel-button clicktoggleSelection([tableData[1], tableData[2]])Toggle selection status of second and third rows/el-buttonel-button clicktoggleSelection()Clear selection/el-button/div --
/templatescript langts setup
import { ref } from vue
import { ElTable } from element-plusinterface User {date: stringname: stringaddress: string
}const multipleTableRef refInstanceTypetypeof ElTable()
const multipleSelection refUser[]([])
const toggleSelection (rows?: User[]) {if (rows) {rows.forEach((row) {// TODO: improvement typing when refactor table// eslint-disable-next-line typescript-eslint/ban-ts-comment// ts-expect-errormultipleTableRef.value!.toggleRowSelection(row, undefined)})} else {multipleTableRef.value!.clearSelection()}
}
const handleSelectionChange (val: User[]) {multipleSelection.value val
}const tableData: User[] [{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,},{date: 2016-05-08,name: Tom,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-06,name: Tom,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-07,name: Tom,address: No. 189, Grove St, Los Angeles,},
]
/script 只需要在事件handleSelectionChange中添加两行代码 const handleSelectionChange (val: User[]) {multipleSelection.value valif(val.length 1){multipleTableRef.value.clearSelection()multipleTableRef.value.toggleRowSelection(val.pop())}
}
