Table实现多选和单选的几种方式

Table实现多选和单选的几种方式

1、多选

① 使用提供的方案：手动添加一个el-table-column，设type属性为selection即可。

② 示例的方式与提供的方案同理。

2、单选

① 使用提供的方案：配置highlight-current-row属性即可实现单选，搭配@current-change="handleCurrentChange"

② 如示例中自定义列模板的方式。

③ 多选+提示："请勿选择多行！"。

④ 多选+默认取选择数据中的第一条。list.splice(1,1); list[0];

3、示例

<el-table
   ref="datumMultipleTable"
   border
   style="width: 100%"
   :height="tableHeight"
   :max-height="520"
   :data="tableList"
   :show-overflow-tooltip="true"
   @selection-change="handleSelectionChange">
  <template v-for="(item, index) in datumTableColumns">
    <el-table-column :key="'radio'+index" :label="item.label" :width="item.width" v-if="item.type === 'radio'">
      <template slot-scope="scope">
        <el-radio :label="scope.$index" v-model="radioSelect" @change.native="getCurrentRow(scope.row)">&nbsp;</el-radio>
      </template>
    </el-table-column>

    <el-table-column v-else :key="index"
         :type="item.type ? item.type : ''"
         :prop="item.prop"
         :label="item.label"
         :width="item.width"
         :fixed="item.fixed"
         :formatter="item.formatterValue">
    </el-table-column>
  </template>
  <!-- 操作列插槽 -->
  <slot name="table-column-operate"></slot>
</el-table>

Methods

datumTableColumns:[
  { type: "index", label: "序号" },
  { type: "selection", label: "" },
  { type: "radio", label: "单选", width: 55, },
  { prop: "name", label: "名称"},
  { prop: "phone", label: "电话"},
  { prop: "email", label: "电子邮件"},
  { prop: "introduce", label: "个人介绍"}
]

handleCurrentChange(val) {
	// 获取选中行
	this.templateSelection = val;
	// 选中行回显
	// this.$refs.datumMultipleTable.setCurrentRow(row);
}
handleSelectionChange(list) {
	// 获取多选选中数据
	this.selectedList = list;
},
getCurrentRow(row){ 
        // 获取选中数据 row表示选中这一行的数据，可以从里面提取所需要的值
        this.templateSelection = row
},
clearSelectionChange() {
	// 清除选中项-多选
	this.$refs.datumMultipleTable.clearSelection();
}