el-table表格的一些操作-表格实现单选、多选

表格实现多选

<el-table
      :data="dataList"
      border
      @selection-change="handleSelectionChange"
    >
          //多选框
          <el-table-column type="selection" width="55" align="center" />
          
</el-table>

handleSelectionChange(val) {
      console.log(val);
 },

参数说明：

        dataList:表格渲染的数据

        handleSelectionChange：获取所有选中行的数据方法

表格实现单选

<el-table :data="dataList" border>
      <el-table-column width="50px" label="选择" align="center">
        <template scope="scope">
          <el-radio
            :label="scope.row.id"
            v-model="radio"
            @change.native="handleSelectionChange(scope.$index, scope.row)"
            >{{ "" }}</el-radio
          >
        </template>
      </el-table-column>
</el-table>

handleSelectionChange(index,row){
    console.log(row);
    console.log(index);
}

①绑定使用唯一值id进行绑定数据,保证数据唯一性。

（不然好多行被选中）

②因为label的显示原因，会默认将数据id显示出来。

el-radio标签里必须写{{ "" }}或{{}}，否则单选按钮后面会出现scope.row.id

③change.native方法：

.native 官网解释：

 你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。

④data里面radio设置初始值""，若哪一行想默认选中，radio设置初始值为该行的id