1

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

你可以在这里找到一个小提琴https://jsfiddle.net/arjanno/pdazb5kf/28/

关键是这里发生了什么

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

只要您不将数据设置为脏,您就应该能够单击任何行。当您单击 Dirty 时,它应该会显示一个询问您是否要丢失更改的模式。取消时,我想在单击另一行之前留在我所在的行上。

4

1 回答 1

1

我不认为我们可以通过回调给我们index的数据知道行的。on-current-change这可以/应该改变,因为它有用,可以自由地为它打开一个问题。

在任何情况下,您都可以将最后选择的行与当前数据集进行比较,并使用_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
        }
      });
    }
  }
}
于 2018-06-27T05:31:15.567 回答