Пользовательский интерфейс элемента vue.js привязывает логические данные к столбцу выбора

Как привязать логические данные к флажкам в столбце выбора, чтобы показать пользователю, выбрана строка или нет.

Вот ссылка на JSFiddle:

Таблица:

 <el-table ref = "multipleTable" :data = "tableData3" style = "width: 100%" @selection-change = "handleSelectionChange">
<el-table-column type = "selection" width = "55"  property = "key">
</el-table-column>
<el-table-column label = "Date" width = "120">
  <template slot-scope = "scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column property = "name" label = "Name" width = "120">
</el-table-column>
<el-table-column property = "address" label = "Address" show-overflow-tooltip>
</el-table-column>

tableData3: [{
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          key:true
        }, {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          key:true
        }, {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          key:false
        }, {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',          
          key:true
        }, {
          date: '2016-05-08',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          key:true
        }],

необходимо для привязки ключевых значений к первому столбцу таблицы.

javascript vue.js element

24.12.2018 09:42

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

2 246

Ответы 1

Если я хорошо понял ваш вопрос, у вас есть свойство key в каждой строке ваших данных tableData3. Вы хотите показать пользователю, была ли выбрана строка или нет, в зависимости от того, является ли keytrue или false.

Вы можете сделать это с помощью метода mounted:

Вы выбираете строки для переключения, удаляя ложные с помощью метода массива filter.
Вы переключаете эти строки с помощью метода toggleSelection

mounted() {
  const rowsToToggle = this.tableData3.filter(row => row.key)
  this.toggleSelection(rowsToToggle)
}

Вот рабочий пример с соответствующим поведением. Надеюсь, это вам поможет.

Для представления данных это нормально. Как насчет пользовательского ввода, когда пользователь выбирает или отменяет выбор строк, как можно обновить «ключевые» значения?

— 24.12.2018 12:12

24.12.2018 11:14