Выберите конкретную строку в таблице с помощью одного выбора - PullRequest
Новая
       11

Выберите конкретную строку в таблице с помощью одного выбора

0 голосов
/ 25 июня 2018

Я хочу реализовать метод, который отменяет переход к следующей строке, если данные изменились. Я думал о том, чтобы использовать событие on-current-change, поскольку это предоставляет мне oldCurrentRow. Какое событие я должен генерировать, с какими параметрами оставаться в последней выделенной строке.

Вы можете найти скрипку здесь https://jsfiddle.net/arjanno/pdazb5kf/28/

Ключ, что здесь происходит 

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

Пока вы не установите грязные данные, вы сможете нажимать на любую строку. Когда вы нажимаете «Грязный», на нем должен появиться модальный вопрос о том, хотите ли вы потерять свои изменения. При отмене я хочу остаться в той строке, в которой находился до щелчка по другой строке.

1 Ответ

0 голосов
/ 27 июня 2018

Я не думаю, что мы можем узнать 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
        }
      });
    }
  }
}
...