项目开发使用的elemnetUI的table组件，牵扯到一个多选框的回显机制，这里记录一下。(最新方法在最下面)
 
那么想要实现table的多选框回显，前提得有多选框，而实现回显也主要有依赖多选框自带的几个事件，当表格存在多选框时这几个事件便可以生效：
 
 
<el-table ref="multipleTable" 
          :data="carData" 
          :empty-text="emptytext"
          :header-cell-style="{ 'background-color': '#5F7ABF', 'color': '#fff','border': 'none' }"
          :row-key="getRowKeys"
          style="margin-top: 10px;width:100%" stripe border 
          // 主要事件就是如下几个
          @selection-change="handleChange"
          @select-all="handleSelectAll"
          @select="handleSelect">
              <el-table-column type="selection" :reserve-selection="true" width="40"></el-table-column>
              <el-table-column
                label="车牌号"
                align="center"
                prop="vehicleNo"
                min-width="150px">
              </el-table-column>
              <el-table-column
                  prop="activeStatus"
                  align="center"
                  label="状态"
                  min-width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.activeStatus === '在线'" style="color:#13CE66">{{ scope.row.activeStatus }}</span>
                  <span v-else>{{ scope.row.activeStatus }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="platformName"
                align="center"
                label="运营商平台"
                min-width="150px"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="owersName"
                align="center"
                label="企业/业户"
                min-width="150px"
                show-overflow-tooltip>
              </el-table-column>
            </el-table>
 
都是elementUI自带的事件，详细了解可以去看官网，
 
elementUI  table的多选框是双向切换状态，即点击勾选，再点击取消勾选，所以要实现回显功能，首先应该判断多选框当前的状态，默认的select事件会携带两个参数，selection即当前勾选的所有数据的集合（数组），row即当前行的数据，代码如下：
 
handleSelect(val, row) {
        if (this.firstIN === 1) { // 设置第一次进来才回触发事件
          /* 1 => add ; 0 => remove*/
          let flag = 0
          for (const i in val) {
            if (row.id === val[i].id) {
              flag = 1
              break
            }
          }
          if (flag === 1) {
            // 如果判断当前为添加则将当前勾选数据push到指定数组中
            this.superviseDate.push(row)
          } else {
            // 否则从数组中删除当前行数据
            for (const i in this.superviseDate) {
              if (this.superviseDate[i].id === row.id) { this.superviseDate.splice(i, 1) }
            }
          }
        }
      },
 
// select-all事件会勾选或者取消勾选当前页面的所有数据
handleSelectAll(val) {
        if (this.firstIN === 1) { // 意思第一次点击不会执行hangleSelectAll里面的方法
          var v = this
          // remove
          if (val.length === 0) {
            for (const i in v.carData) {
              for (const j in v.superviseDate) {
                if (v.superviseDate[j].id === v.carData[i].id) {
                  v.superviseDate.splice(j, 1)
                  break
                }
              }
            }
          }
          if (v.superviseDate.length === 0) {
            for (const i in val) {
              v.superviseDate.push(val[i])
            }
          } else {
            for (const i in val) {
              let flag = false
              for (const j in v.superviseDate) {
                if (v.superviseDate[j].id === val[i].id) {
                  flag = true
                  break
                }
              }
              if (!flag) { v.superviseDate.push(val[i]) }
            }
          }
        }
      },
 
// selection-change事件
handleChange(val) {
    if (this.firstIN === 0) {
      this.superviseDate = val
    }
  }
 
上述多选框的这三个事件结合方能准确提炼出当前表格勾选的数据
 
回显是在表格数据请求里面完成的，即在获取表格数据时，将之前获取的表格勾选的数据进行回显，每一次把当前页请求的数据和表格勾选数据做对比，如果相等则回显。
 
// 每一次执行数据请求的方法时，在请求成功的方法里执行回显
// 在外层定义一个用来保存回显数据的数组checkedrow
            res.data.rows.forEach(item => {
                this.superviseDate.forEach(val => {
                  if (val.vehicleNo=== item.vehicleNo) {
                    checkedrow.push(item)
                  }
                })
              })
              this.$nextTick(() => {
                checkedrow.forEach(row => {
                  this.$refs.multipleTable.toggleRowSelection(row, true) // 回显
                })
              })
 
上述就是基本的table数据回显，但是因为业务需要，这个项目回显的是从input v-model绑定的值，因为在选择车辆时，点击确定，勾选数据就是赋值给input 绑定的值，这样的写法也可以避免很多bug，比如，如果用户删除input的值（input里面有一个x的清楚按钮），这是再打开车辆选择弹框，那么table数据是不需要回显的。代码如下：
 
if (this.superviseDate || this.vehicleNo) {
            if (this.vehicleNo || this.selectNo) { // 数据回显
              const checkedrow = []
              let cidarr = []
              let no = ''
              if (this.vehicleNo) {
                this.clickCheckArr = this.vehicleNo.split(',')
              }
              if (this.clickCheckArr.length > 0) no = this.clickCheckArr.join()
              if (no.indexOf(',') !== -1) {
                cidarr = no.split(',')
              } else {
                cidarr.push(no)
              }
              res.data.rows.forEach(item => {
                cidarr.forEach(i => {
                  if (i === item.vehicleNo) {
                    checkedrow.push(item)
                  }
                })
              })
              this.$nextTick(() => {
                checkedrow.forEach(row => {
                  this.$refs.multipleTable.toggleRowSelection(row, true)
                })
              })
            } else {
              this.$refs.multipleTable.clearSelection()
            }
          }
 
以上方法适用于elementUI table之前的版本了，也不知道在何时饿了么已经对表格功能做了更新，以上需求利用table自带的方法便可以轻松实现：
 
Table-column增加属性：reserve-selection
 
 
table增加属性：row-key
 
 
增加以上属性便可以轻松实现。

 
解决element多选框回显问题
 
一、问题
二、解决方法

 
 
一、问题
 
后端返回的多选框内容为一个字符串，而下拉框的内容必须放在数组中未多个字符串才可以显示，因此要对返回的数据进行处理。
 
 
 
二、解决方法
 
代码如下（示例）：
 
for(var i of res.rows){
  let old = i.operatorTypes && i.operatorTypes != null ? i.operatorTypes.toString() : null;
  let news = old != null ? old.split(',') : null;          
  i.operatorTypes = news ;
}
 

一、单选框：
 
1.新建 new JRadioButton 单选按钮
 
2.单选按钮都放到add()一个 按钮组new ButtonGroup()里(ButtonGroup只有单选功能，不存在布局功能，所以要第三步，单独添加JRadioButton 到容器)
 
3.单独添加 单选按钮到容器，并设置布局
 
代码：
 
package GUI.Swing.图片按钮_单选框_多选框;

import javax.swing.*;
import java.awt.*;

public class 单选框 extends JFrame {
    public 单选框() throws HeadlessException {
        this.setTitle("单选框");
        this.setVisible(true);
        this.setBounds(100,100,400,300);
        this.setDefaultCloseOperation(EXIT_ON_CLOSE);
        Container contentPane = this.getContentPane();
        /*
        单选框方法教程:
        new 3 个 JRadioButton 单选框，然后放到一个按钮组ButtonGroup里(按钮组只实现单选效果，不布局）
        在将3个单选按钮填加到容器并且布局
         */
        JRadioButton jarvan = new JRadioButton("jarvan");
        JRadioButton 半亩方糖 = new JRadioButton("半亩方糖");
        JRadioButton 时光 = new JRadioButton("时光");
        //add the JRadioButtons to the ButtonGroup
        ButtonGroup buttonGroup = new ButtonGroup();
        buttonGroup.add(jarvan);
        buttonGroup.add(半亩方糖);
        buttonGroup.add(时光);
        //add the JRadioButtons to the contentPane ,and set the Layout
        contentPane.add(jarvan,BorderLayout.NORTH);
        contentPane.add(半亩方糖,BorderLayout.CENTER);
        contentPane.add(时光,BorderLayout.SOUTH);

    }

    public static void main(String[] args) {
        new 单选框();
    }
}
 
效果图
 
 
二、多选框（其实单选框不用ButtonGroup也能达到类似效果)：
 
和单选框类似，JRadioButton 变成 check
 
package GUI.Swing.图片按钮_单选框_多选框;

import javax.swing.*;
import java.awt.*;

public class 多选框 extends JFrame {
    public 多选框() throws HeadlessException {
        this.setTitle("多选框");
        this.setBounds(100, 100, 400, 400);
        this.setVisible(true);
        this.setDefaultCloseOperation(EXIT_ON_CLOSE);
        /*
        复选框教程：
        1.新建 Checkbox()
        2.将复选框添加到容器
         */
        Checkbox jarvan = new Checkbox("jarvan");
        Checkbox shiGuang = new Checkbox("shiGuang");
        Checkbox 半亩方糖 = new Checkbox("半亩方糖");
        //add checkBox to the contentPane
        Container contentPane = this.getContentPane();
        contentPane.add(jarvan, BorderLayout.NORTH);
        contentPane.add(shiGuang, BorderLayout.CENTER);
        contentPane.add(半亩方糖, BorderLayout.SOUTH);

    }

    public static void main(String[] args) {
        new 多选框();

    }
}

 
效果图
 

 #### 问题：汉字无法显示的编码问题。

日常开发中，可能会遇到要做带多选框的下拉，如下图
 
 

 
 
是不是你想要的呢，下面来谈谈实现，我这个用的是一个bootstrap multiselect 插件，至于下载啥的网上到处都有
 
<select id="area" class="form-control text-input-280" multiple="multiple">
                        <option value='1'>北京</option>
                        <option value='2'>上海</option>
                        <option value='3'>重庆</option>
                        <option value='4'>广州</option>
                    </select>
 

 
 
对应js（要放在document.ready方法里）
 
$('#area').multiselect({
               nonSelectedText: '   请选择  ',
               buttonWidth:'180px',
               includeSelectAllOption: true,
               selectAllNumber: false,
               selectAllText: '全国',
               allSelectedText: '全国'
        });
 

 
 
至于每个字段啥意思试验下就知道了
 
由于获取不到选中的值（1,2，3之类的，不是北上广），所以在源码中添加了方法
 
修改bootstrap multiselect.js，添加一个方法
 

$label.attr('vals', $element.attr('vals'));

 
 
 

updateSelectedValue: function() {
            var selected = [];
            $('#area option:selected').each(function() {
                selected.push([$(this).val(), $(this).data('order')]);
            });
            selected.sort(function(a, b) {
                return a[1] - b[1];
            });

            var text = '';
            for (var i = 0; i < selected.length; i++) {
                text += selected[i][0] + ', ';
            }

            text =text.substring(0, text.length - 2);

            $('.multiselect', this.$container).attr('vals', text);
        },

 
 
 
这个函数需要在很多地方执行，如果大家不知道在哪些地方执行，那么找到源码中的 this.updateButtonText();方法后面就好了，有多个这个方法，就加多少个。
 
这样的话就ok啦。
 

 
 
通过F12，我们看到了我们想要多的值了