Select a specific row in a table with single select

Question

I want to implement a method that cancels moving to the next row if data has changed. My thought was to use the on-current-change event as this provides me with the oldCurrentRow. What event should I emit with what parameters to achieve staying on the last highlighted row.

You can find a fiddle here https://jsfiddle.net/arjanno/pdazb5kf/28/

Key is what happens here

    onCancel: function () {
       //Move back to oldCurrentRow
       this.$Message.info(`Clicked cancel`);
    }

As long as you don't set data dirty you should be able to click on any row. When you click Dirty it should show a modal asking you if you want to lose your changes. On cancel I want to stay on the row I was before clicking on another row.

Answer 1

I don't think we can know the index of the row by the data the on-current-change callback gives us. This can/should be changed since its useful, fell free to open a issue for it.

In any case what you can do is to compare the last selected row with the current data set and use the _highlight key to tell i-table which row to highlight.

Example: https://jsfiddle.net/pdazb5kf/40/

The code would be:

function rowToString(row) {
  const data = ['name', 'age', 'address'].map(key => row[key]);
  return JSON.stringify(data);
}
export default {
  data() {
    return {
      columns3: [{
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: 'Name',
          key: 'name'
        },
        {
          title: 'Age',
          key: 'age'
        },
        {
          title: 'Address',
          key: 'address'
        }
      ],
      dirty: false,
      modal1: false,
      data1: [{
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
          date: '2016-10-03'
        },
        {
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park',
          date: '2016-10-01'
        },
        {
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
          date: '2016-10-02',
        },
        {
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'
        }
      ]
    }
  },
  methods: {
    onCurrentChange: function(currentRow, oldCurrentRow) {
      this.lastIndex = rowToString(oldCurrentRow);
      if (this.dirty) {
        this.modal1 = true;
      }

    },
    onCancel: function() {
      //Move back to oldCurrentRow
      this.$Message.info(`Clicked cancel`);
      this.data1 = this.data1.map((row, i) => {
        return {
          ...row,
          _highlight: rowToString(row) === this.lastIndex
        }
      });
    }
  }
}