07表格多选

源代码

• slot-scope能够自定义表头和表格内容

• scope.row获取到表格中的每行数据

<el-table :data="tableReponsData" border style="width: 100%">
      <el-table-column fixed   width="100">
        <template  slot="header" slot-scope="scope"> 
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">订购人</el-checkbox>
        </template>
        <template slot-scope="scope">
          <el-checkbox-group v-model="checkList" @change="handleCheckeditemChange">
            <el-checkbox :label="scope.row.order_number" :key="scope.row.order_number">{{scope.row.subscriber}}</el-checkbox>
          </el-checkbox-group>
        </template>
      </el-table-column>
      <el-table-column fixed prop="teacher" label="课题组老师" width="100">
      </el-table-column>
      <el-table-column  prop="order_number" label="订单号" width="150">
      </el-table-column>
      <el-table-column  prop="secondID" label="二代基因编号" width="120">
      </el-table-column>
      <el-table-column  prop="thirdID" label="三代基因编号" width="120">
      </el-table-column>
      <el-table-column prop="company" label="公司" width="120">
      </el-table-column>
      <el-table-column prop="sequence" label="sequence" width="200">
      </el-table-column>
      <el-table-column prop="GCContent" label="GC含量" width="200">
      </el-table-column>
      <el-table-column prop="TMValue" label="TM值" width="200">
      </el-table-column>
      <el-table-column prop="decoratePattern" label="修饰方式" width="200">
      </el-table-column>
    </el-table>

多选框

• 在使用多选框时，全选的是所有数据，而不是单页数据，这个之后可以通过减去页码数改进一下

    handleCheckeditemChange(value){
        let checkCount=value.length;
        this.checkAll= checkCount === this.reponsData.length;
        this.isIndeterminate= checkCount > 0 && checkCount<this.reponsData.length
    },

参考

1. checkBox https://element.eleme.cn/#/zh-CN/component/checkbox

2. table https://element.eleme.cn/#/zh-CN/component/table