ElementUI表格多选框改成仅支持单选

需求说明

 工作中原计划对后台传过来的数据在前台用下拉框展示，但是后台树据大概有几万条，如此会导致渲染时间太慢，导致页面崩溃，所以将需求改成点击下拉框，弹出一个页面，在该页面上分页展示后台数据，如果选中某一条，则进行页面数据刷新

使用到的ElementUI组件介绍

1.下拉框或输入框

 点击该下拉框，不触发渲染下拉选项事件，而是绑定一个点击事件让其弹出一个Dialog对话框组件，我们在该对话框里分页渲染数据。

<el-select v-if="showSelectName" v-model="showname" :placeholder="请选择选项" remote clearable filterable reserve-keyword @change="getOnPlan" @click.native="dialogTableVisible = true" @clear="clear"/>

这里仅仅将下拉框作为一个可点击的组件（可用Input代替），上面绑定一个@click.native="dialogTableVisible = true"事件，用于点击以弹出对话框。
@clear=“clear” 事件用于在清空的时候刷新数据（我们选中一条数据那么父页面渲染的就是该数据的信息，点击清空则渲染默认数据）
@change=“getOnPlan” 下拉框里内容改变时，刷新页面展示相应的内容

2.对话框，内部嵌套了一个搜索框，一个表格，一个分页UI

<el-dialog :visible.sync="dialogTableVisible" title="请选择投放计划">
            <md-input v-if="showSearch" v-model="searchCampaignName" :placeholder="$t('campaign.button.content.tipOfCampaign')" type="text" @keyup.enter.native="getCampaignNameList">{{ $t('campaign.button.content.tipOfCampaign') }}</md-input>
            <el-table
              ref="multipleTable1"
              :data="campaignNames"
              @select-all="dialogCheck"
              @select="dialogCheck"
              @selection-change="dialogCheckChange"
            >
              <el-table-column type="selection" width="55"/>
              <el-table-column
                label="投放计划ID"
                prop="id"/>
              <el-table-column
                label="投放计划名称"
                prop="name"/>
              <el-table-column
                label="投放计划状态"
                prop="status"/>
            </el-table>
            <el-row>
              <div class="pagination-container">
                <el-pagination
                  :current-page="campaignListQuery.page"
                  :page-sizes="[10, 50, 100, 200]"
                  :page-size="campaignListQuery.limit"
                  :total="dialogtotal"
                  layout="total, sizes, prev, pager, next, jumper"
                  align="center"
                  @size-change="dialoghandleSizeChange"
                  @current-change="dialoghandleCurrentChange"/>
              </div>
            </el-row>
          </el-dialog>

点击首页的下拉框，触发click事件，弹出该对话框，
对话框又三部分组成

1 一个搜索框

<md-input v-if="showSearch" v-model="searchCampaignName" :placeholder="$t('campaign.button.content.tipOfCampaign')" type="text" @keyup.enter.native="getCampaignNameList">{{ $t('campaign.button.content.tipOfCampaign') }}</md-input>

2 一个表格

 <el-table
              ref="multipleTable1"
              :data="campaignNames"
              @select-all="dialogCheck"
              @select="dialogCheck"
              @selection-change="dialogCheckChange"
            >
              <el-table-column type="selection" width="55"/>
              <el-table-column
                label="投放计划ID"
                prop="id"/>
              <el-table-column
                label="投放计划名称"
                prop="name"/>
              <el-table-column
                label="投放计划状态"
                prop="status"/>
            </el-table>

3 一个分页器

<el-row>
              <div class="pagination-container">
                <el-pagination
                  :current-page="campaignListQuery.page"
                  :page-sizes="[10, 50, 100, 200]"
                  :page-size="campaignListQuery.limit"
                  :total="dialogtotal"
                  layout="total, sizes, prev, pager, next, jumper"
                  align="center"
                  @size-change="dialoghandleSizeChange"
                  @current-change="dialoghandleCurrentChange"/>
              </div>
            </el-row>

其中该表格原来是复选框形式的，但是现在只允许一次选中一条数据，所以改变一下，注意表格上面的三个事件，其实现如下

dialogCheck: function(selection, row) {
      this.$refs.multipleTable1.clearSelection()
      if (selection.length === 0) { // 判断selection是否有值存在
        return
      }
      if (row) {
        this.campaignName = row.id
        this.showname = row.name
        this.getOnPlan()
        this.selectioned = row
        this.$refs.multipleTable1.toggleRowSelection(row, true)
      }
    },

    /**
   *  取消单选的checkbox
   */
    dialogCheckChange(row) {
      window.console.log(row)
      if (row.length === 0) {
        this.selectioned = null
        window.console.log('取消选中')
        this.clear()
      }
    },

选中一条数据，将该数据的this.campaignName = row.id， this.showname = row.name进行赋值，这样我们就可以在下拉框里显示该数据的名称，并且跟据该数据的ID去查询该数据。当什么都没选中时，执行clear方法，清空下拉框里的名称，
clear时间如下

// 清空之后的查询
    clear() {
      this.campaignName = null
      this.flightListQuery.campaignId = null
      this.showname = null
      this.getOnPlan()
      if (this.$refs.multipleTable1) {
        this.$refs.multipleTable1.clearSelection()
      }
    },

清空所有查询条件，并执行getOnPlan()进行查询，如果是在下拉框里点击清空，还会清楚对话框表格里的选中数据，也就是我们在对话框里清除选中，会影响下拉框，在下拉里清除会影响对话框表格的选中状态。

getOnPlan()自己实现自己的逻辑就行。
另外分页器不做过多说明，其中两个事件自己实现即可，可参见官网。由于项目保密问题，所以页面就不给大家看了，上面是答题实现过程，使用的是VUE，一些数据的定义读者自己补上即可。

添加一个 隐藏全选框的方法
.el-table__header-wrapper .el-checkbox{
display:none
}