vue 项目中使用el-table勾选或点击某行字体加粗
el-table勾选或点击某行字体加粗
·
第一种:表格某行数据的id:
//index.vue
<el-table
ref="repairTable"
:data="tableData.data"
style="width: 100%"
:row-style="selectedRowStyle"
:highlight-current-row="true"
@row-click="repairTableRow"
@selection-change="repairTableChange"
>
</el-table>
//index.js代码
1.在data中定义
repairTableSelection:[]
// 页面勾选字体变粗
selectedRowStyle({ row }) {
let idArr = this.$refs.repairTable.selection.map((row) => row.id)
if (idArr.includes(row.id)) {
return { 'font-weight': '700' }
}
}
// 可以拿到勾选的某一行的数据
repairTableChange(val) {
this.repairTableSelection = val
},
//点击某一行
repairTableRow(row) {
this.$refs.repairTable.clearSelection()
this.$refs.repairTable.toggleRowSelection(row)
},
第二种:watch侦听配合使用
//index.vue
<el-table
:data="raparsDialogData"
ref="tablerapars"
style="width: 100%"
:row-style="selectedRaparRowStyle"
:highlight-current-row="true"
@row-click="repairDialogTableRow"
@selection-change="repairDialogTableChange"
>
</el-table>
//index.js
//在 data 中 定义
repairDialogTableSelection:[]//勾选的某行数据
selectRow:[] //先定义空数组
//watch
watch: {
// 勾选表格
repairDialogTableSelection(data) {
this.selectRow = [];
if (data.length > 0) {
data.forEach((item, index) => {
this.selectRow.push(this.raparsDialogData.indexOf(item))
})
}
}
},
// methods
methods: {
// 勾选字体变粗
selectedRaparRowStyle({ row, rowIndex }) {
if (this.selectRow.includes(rowIndex)) {
return { 'font-weight': '700' }
}
},
//点击某行
repairDialogTableRow(row) {
this.$refs.tablerapars.clearSelection()
this.$refs.tablerapars.toggleRowSelection(row)
},
//获取勾选某行的数据
repairDialogTableChange(data) {
this.repairDialogTableSelection = data
},
}
更多推荐
已为社区贡献1条内容
所有评论(0)