elementUi в виде таблицы, чтобы добавить множественный выбор, множественный выбор и опорожнение функции

• Достичь множественный выбор прост: добавить инструкцию el-table-column, набор typeатрибутов selectionможет быть;

<шаблон> 
  <эш таблица
    ссылок = " multipleTable " 
    : данные =" tableData" 
    подсказка -эффект = "темный" 
    стиль = "ширина: 100%" 
    @selection -смена = "handleSelectionChange"> 
    <эль-таблицы- колонки 
      типа = "выбор" 
      ширина = "55"> 
    </ эль-таблица-столбец> 
    <эль-таблицы- столбце 
      Метка = "日期" 
      ширина = "120"> 
      <шаблон слот-сфера = "Объем"> {{scope.row. дата}} </ шаблон>
    </ эль-таблица-столбец> 
    <эль-таблицы- колонки 
      проп= "Название" 
      этикетка = "название" 
      ширина = "120"> 
    </ EL-Таблица-столбец> 
    <ЭЛ-таблицы- колонка 
      проп = "адрес" 
      этикетка = "адрес" 
      Show -overflow-подсказка> 
    </ EL-таблица -column> 
  </ EL-Table> 
  <DIV стиль = "маржа-Top: 20px"> 
    <Кнопка-EL @ = замковое "toggleSelection ([. TableData [1], TableData [2]]) " > а второй переключатель, первый три строки выбранного состояния </ EL-Button> 
    <Button-EL @ = замковое "toggleSelection () "> Отменить </ EL-Button> 
  </ DIV> 
</ Template>

Ссылка привязки данных объектов данных в параметрах хранения данных для выбранного multipleTable:

 

<Script> 　　
  Экспорт по умолчанию { 
    Data () { 
      возвращение { 
        TableData: [{ 
          ДАТА: '2016-05-03' , 
          название: 'Сяоху' , 
          адрес: 'Jinsha Putuo района роуд Lane 1518' 
        }, { 
          ДАТА: '2016-05-02' , 
          название: 'Сяох' , 
          адрес: 'Jinsha Putuo район роуд Lane 1518' 
        }, { 
          ДАТА: '2016-05-04' , 
          название: 'Сяох' , 
          адрес: «Шанхай Putuo района Цзиньша River Road 1518, Lane '
        }, {
          Дата:'2016-05-01' , 
          название: 'Сяох' , 
          адрес: 'Jinsha Putuo район роуд Lane 1518' 
        }, { 
          ДАТА: '2016-05-08' , 
          название: 'Сяох' , 
          адрес: «Шанхай Putuo района Цзиньша роуд Lane 1518 ' 
        }, { 
          ДАТА: ' 2016-05-06 ' 
          название: ' Сяоху ' 
          адрес: ' Jinsha Putuo района роуд Lane 1518 ' 
        }, { 
          ДАТА: ' 2016-05 -07 ' 
          название: ' Сяох ' 
          адрес: 'Putuo района Цзиньша роуд Lane 1518 ' 
        }],
         multipleSelection: [] // для хранения выбранного набора данных строки 
      }
    },

    Методы: {
      toggleSelection (строки) {
         ЕСЛИ (строки) { 
          rows.forEach (Row = > { 
            это $ refs.multipleTable.toggleRowSelection (Row);. 
          }); 
        }  еще { 
          .. это $ рефов multipleTable .clearSelection (); // Очистить вариант, ваш проект: после того, как интерфейс запроса, повторно отобразить страницу , когда запрошенные данные , используйте этот режим, установите флажок сбрасывается состояние.
        } 
      },
      HandleSelectionChange (Val) {
        это.multipleSelection =Val;
      }
    }
  }
</ SCRIPT>

Если проект может выбрать только операцию передачи данных :

　　

@ Выбор-изменение событий: опция запуска смены

<эш таблица
        @selection -смена = "handleSelectionChange" 
        исх = "multipleTable" 
        : ключ = "tableKey" 
        : данные = "tableData" 
        строка -key = "Идентификатор" 
        v -loading = "tableLoading" 
        элемент -loading-текст =»给我一点时间» 
        подходит 
        размер = "мини" 
        подсказка -эффект = "темный" 
        стиль = "ширина: 100%; размер шрифта: 12px; край дно: 15px; граница радиус: 3px;" 
        : заголовок -клетка стиль = «tableHeaderColor» 
      >

Методы: Метод

handleSelectionChange (Val) {// возвращаемое значение устанавливается вал выбранной строки данных
       это .multipleSelection = val.map (п => item.id);
       это .isProcurementStatus = val.map (п => item.procurementStatus);
       этого . = val.map forDialogTitle (п => item.purchaseProject); 
    },

MultipleSelection определенная длина определяется выбранным числом