第一种:表格某行数据的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
        },
}
       

Logo

前往低代码交流专区

更多推荐