give highlights when item row table checked checkbox in vuejs

Question

I used code from vue typescript admin and element-ui, and will use attribute highlight-current-row after i check checkbox item table. when code highlight-current-row add attribute table, work in single select. but when add in multiple select on checkbox, it's not function

how to give highlights after check checkbox in row item table in vueJS? I didn't find it in the library

https://element.eleme.io/#/en-US/component/table#single-select

https://element.eleme.io/#/en-US/component/table#multiple-select

thanks before

If I rightly understood your problem, you want to highlight multiple rows ? — BTL
– BTL, Commented May 8, 2020 at 9:42

dreijntjens · Accepted Answer · 2020-05-11 07:05:17Z

1

Use the : row-class-name together with the reference to the table to see witch items are selected.

<el-table :data="tableData" style="width: 100%" :row-class-name="rowClassName" ref="tab">
    <el-table-column  type="selection"  width="55"></el-table-column>
    <el-table-column prop="date" label="date" width="120"></el-table-column>
    <el-table-column prop="name" label="name" width="120"></el-table-column>
    <el-table-column prop="address" label="address"></el-table-column>
  </el-table>

JS:

data() {
  return {
    tableData: [
        { id: 1, date: '2020-07-01', name: 'Bob', address: 'Florida' }, 
        { id: 2, date: '2020-05-04', name: 'Alice', address: 'Arizona' }, 
        { id: 3, date: '2020-08-01', name: 'Carole', address: 'Calefornia' }]
  }
}
methods: {
  rowClassName({row, rowIndex}) {
    return this.$refs.tab.selection.find(element => element.id == row.id)
      ? 'selected-row'
      : ''
    }
  }

https://codepen.io/reijnemans/pen/dyYeBGG

answered May 11, 2020 at 7:05

dreijntjens

4,84528 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

dyan tb Over a year ago

why my selection in refs table does not exist @dreijntjens ? image

dreijntjens Over a year ago

Did you add the ref attribute to the el-table tag?

dyan tb Over a year ago

yes I added the ref attribute in the el-table tag image

dreijntjens Over a year ago

This related that you are using typescript, maybe you can have a look at this: stackoverflow.com/questions/46505813/…

dyan tb Over a year ago

it's work for me... return (<this>this.$refs.tab).selection.find(element => element.id == row.id) thanks @dreijntjens

BTL · Accepted Answer · 2020-05-08 09:56:49Z

1

Here is a codepen who does exactly what you want : https://codepen.io/Andugal/pen/oNjqGWN

It uses :row-class-name from Table with status in the element-ui doc. And listen to the select event.

answered May 8, 2020 at 9:56

BTL

4,7243 gold badges28 silver badges37 bronze badges

1 Comment

dyan tb Over a year ago

Thanks @BTL, its running in my code, but select all not work when I want to check all of the fields. how do I apply objects to the select all checkbox field? because, in your sample codepen, just use objected, not selected image

Collectives™ on Stack Overflow

give highlights when item row table checked checkbox in vuejs

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related