elementUi in Table form to add multiple choice, multiple choice and emptying function

• Achieve multiple choice is simple: add a manual el-table-column, set typeattributes selectioncan be;

<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop= "name" 
      label = "name" 
      width = "120"> 
    </ EL-Table-column> 
    <EL-the table- column 
      prop = "address" 
      label = "address" 
      Show -overflow-ToolTip> 
    </ EL-Table -column> 
  </ EL-Table> 
  <div style = "margin-Top: 20px"> 
    <Button-EL @ = the Click "toggleSelection ([TableData [. 1], TableData [2]]) " > a second switch, the first three lines of the selected state </ EL-Button> 
    <Button-EL @ = the Click "toggleSelection () "> deselect </ EL-Button> 
  </ div> 
</ Template>

Ref data binding data objects in the data storage options for the selected multipleTable:

 

<Script> 　　
  Export default { 
    Data () { 
      return { 
        TableData: [{ 
          DATE: '2016-05-03' , 
          name: 'Xiaohu' , 
          address: 'Jinsha Putuo District Road Lane 1518' 
        }, { 
          DATE: '2016-05-02' , 
          name: 'Xiaohu' , 
          address: 'Jinsha Putuo District Road Lane 1518' 
        }, { 
          DATE: '2016-05-04' , 
          name: 'Xiaohu' , 
          address: 'Shanghai Putuo District Jinsha River Road 1518, Lane '
        }, {
          date: '2016-05-01' , 
          name: 'Xiaohu' , 
          address: 'Jinsha Putuo District Road Lane 1518' 
        }, { 
          DATE: '2016-05-08' , 
          name: 'Xiaohu' , 
          address: 'Shanghai Putuo District Jinsha Road Lane 1518 ' 
        }, { 
          DATE: ' 2016-05-06 ' , 
          name: ' Xiaohu ' , 
          address: ' Jinsha Putuo District Road Lane 1518 ' 
        }, { 
          DATE: ' 2016-05 -07 ' , 
          name: ' Xiaohu ' , 
          address:'Putuo District Jinsha Road Lane 1518' 
        }], multipleSelection: [] // for storing the selected set of line data 
      } 
    }, 
    Methods: { 
      toggleSelection (rows) { 
        

        IF (rows) { 
          rows.forEach (Row = > { 
            the this . $ refs.multipleTable.toggleRowSelection (Row); 
          }); 
        }  the else { 
          .. the this $ refs multipleTable .clearSelection (); // Clear option, your project: after the request interface, re-render the page when the requested data , use this mode, select the check cleared state.
        } 
      }, 
      HandleSelectionChange (Val) { 
        the this .multipleSelection = Val; 
      } 
    } 
  }
 </ Script>

If the project can only select a data operation :

　　

@ Selection-change events: change trigger option

<el-table
        @selection-change="handleSelectionChange"
        ref="multipleTable"
        :key="tableKey"
        :data="tableData"
        row-key="id"
        v-loading="tableLoading"
        element-loading-text="给我一点时间"
        fit
        size="mini"
        tooltip-effect="dark"
        style="width: 100%;font-size: 12px;margin-bottom:15px;border-radius:3px;"
        :header-cell-style="tableHeaderColor"
      >

methods: Method

handleSelectionChange (val) {// the return value is set val selected row of data
       the this .multipleSelection = val.map (Item => item.id);
       the this .isProcurementStatus = val.map (Item => item.procurementStatus);
       the this . = val.map forDialogTitle (Item => item.purchaseProject); 
    },

MultipleSelection determined length is determined by the selected number of