Select table 中的特定行，单个 select

Question

我想实现一种方法，在数据发生变化时取消移动到下一行。我的想法是使用 on-current-change 事件，因为这为我提供了 oldCurrentRow。我应该使用什么参数发出什么事件以实现停留在最后突出显示的行。

你可以在这里找到 fiddle https://jsfiddle.net/arjanno/pdazb5kf/28/

关键是这里发生的事情

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

只要您不设置脏数据，您应该可以点击任何行。当您单击“脏”时，它应该会显示一个模态，询问您是否要丢失更改。取消时，我想留在单击另一行之前所在的行。

Answer 1

我不认为我们可以通过 on-current-change 回调给我们的数据知道行的 index。这个can/should因为有用所以改了，有空给它开个issue。

无论如何，您可以将最后选择的行与当前数据集进行比较，然后使用 _highlight 键告诉 i-table 要突出显示哪一行。

示例：https://jsfiddle.net/pdazb5kf/40/

代码为：

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
        }
      });
    }
  }
}

Select table 中的特定行，单个 select

Select a specific row in a table with single select

iview-ui