Vue表头下拉选择框使用总结

1、在el-table-culumn 中，加入template 标签，使用：

<template slot="header" slot-scope="scope">
  <el-dropdown trigger="click" @command = "handleCommand">
    <span>类型</span>
    <el-dropdown-menu slot="dropdown">
      <el-radio-group v-model="sx">//这里，会出现一个bug，下文有解决办法
        <el-dropdown-item command="属性0"><el-radio label="0">属性0</el-radio> </el-dropdown-item>
        <el-dropdown-item command="属性1"><el-radio label="1">属性1</el-radio> </el-dropdown-item>
        <el-dropdown-item command="属性2"><el-radio label="2">属性2</el-radio> </el-dropdown-item>
        <el-dropdown-item command="属性3"><el-radio label="3">属性3</el-radio> </el-dropdown-item>
        <el-dropdown-item command="属性4"><el-radio label="4">属性4</el-radio> </el-dropdown-item>
        <el-dropdown-item command="属性5"><el-radio label="5">属性5</el-radio> </el-dropdown-item>
        <el-dropdown-item command="属性6"><el-radio label="6">属性6</el-radio> </el-dropdown-item>
      </el-radio-group>
    </el-dropdown-menu>
  </el-dropdown>
</template>
<template slot-scope="scope">（表中元素）</template>

2、设置handleCommand方法：（当时没使用handleCommand方法做缓冲，在刷新时，第一次刷新不会赋值，第二次刷新会得到上次刷新的值。）

handleCommand(command) {
  if(command == '属性0' ){
    this.sx= '0'
  } else if (command === '属性1') {
    this.sx = '1'
  } else if( command === '属性2') {
    this.sx = '2'
  } else if (command === '属性3') {
    this.sx = '3'
  } else if (command === '属性4') {
    this.sx = '4'
  } else if( command === '属性5') {
    this.sx = '5'
  } else if (command === '属性6') {
    this.sx = '6'
  }
  this.刷新方法;
},

但是在使用过程中，点击下拉框中数据时，会出现执行两次handleCommand()方法的情况。通过一天的询问与查找，得到解决办法。

      问题出现在<el-radio>标签上，当点击框中数据时，数据响应一次handleCommand()方法，<el-radio>也会响应一次handleCommand()方法。所以，应该去掉<el-radio>标签与<el-radio-group>标签。

<template slot="header" slot-scope="scope">
  <el-dropdown trigger="click" @command = "handleCommand">
    <span>类型</span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="属性0">属性0</el-dropdown-item>
      <el-dropdown-item command="属性1">属性1</el-dropdown-item>
      <el-dropdown-item command="属性2">属性2</el-dropdown-item>
      <el-dropdown-item command="属性3">属性3</el-dropdown-item>
      <el-dropdown-item command="属性4">属性4</el-dropdown-item>
      <el-dropdown-item command="属性5">属性5</el-dropdown-item>
      <el-dropdown-item command="属性6">属性6</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>
<template slot-scope="scope">（表中元素）</template>