0

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

3
  • If I rightly understood your problem, you want to highlight multiple rows ? Commented May 8, 2020 at 9:42
  • Yes, you are absolutely right Commented May 8, 2020 at 9:50
  • @BTL. element-ui does not include multiple row highlights. Commented May 8, 2020 at 9:52

2 Answers 2

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

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

5 Comments

why my selection in refs table does not exist @dreijntjens ? image
Did you add the ref attribute to the el-table tag?
yes I added the ref attribute in the el-table tag image
This related that you are using typescript, maybe you can have a look at this: stackoverflow.com/questions/46505813/…
it's work for me... return (<this>this.$refs.tab).selection.find(element => element.id == row.id) thanks @dreijntjens
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.

1 Comment

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.