element ui table 用el-checkbox-group实现多选 反选

1.用  <el-table>自带的多选反选功能总觉得不好用，然后自己用  <el-table> 配合<el-checkbox-group>实现表格反选功能，记录下，不然每次写的时候都花费很多时间

（1）html代码部分

<el-table v-loading="loading" :data="userList">
            <el-table-column label="" width="40">
              <template scope="scope">
                <el-checkbox-group v-model="radio" style="color: #fff;padding-left: 10px; margin-right: -25px;">
                  <el-checkbox :label="scope.row" v-model="scope.row"></el-checkbox>
                </el-checkbox-group>
              </template>
            </el-table-column>
            <el-table-column label="附件名称" align="center" key="attachName" prop="attachName" />
            <el-table-column label="附件编码" align="center" key="attachCode" prop="attachCode" />
            <el-table-column label="描述" align="center" key="descript" prop="descript" />
            <el-table-column label="备注" align="center" key="remark" prop="remark" />
            <el-table-column label="状态" align="center" key="status">
              <template slot-scope="scope">
                <div v-if="scope.row.status==='0'">启用</div>
                <div v-else>停用</div>
              </template>
            </el-table-column>
          </el-table>

（2）js 代码

<script>
import { getAttachmentList, getFlowNode } from '@/api/flow/flowAttachment'

export default {
  name: 'attachSelection',

  data() {
    return {
      radio: [],
      dialogVisible: true,
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      userList: [],
      total: 0,
      form: this.treeData,
      TypeData: {},
    }
  },
  props: {
    treeData: Object,
    processData: {
      type: Object,
      required: true,
    },
  },
  watch: {
    // form 动态赋值
    treeData: function (newVal, oldVal) {
      this.form = newVal // newVal
      // this.law = newVal;
      //
    },
  },
  created() {
    this.getList()
    this.TypeData = this.processData
  },

  methods: {
    getList() {
      this.loading = true
      getAttachmentList(this.queryParams).then((response) => {
        // this.userList = response.rows
        let dataList = response.rows
        this.total = response.total
        let parameterData = {
          nodeId: this.form.id,
          actKey: this.TypeData.id,
        }
        this.$nextTick(() => {
          getFlowNode(this.addDateRange(parameterData)).then((res) => {
            //设置选中行
            let checkData = []
            checkData = res.rows
            if (dataList) {
              for (let i = 0; i < dataList.length; i++) {
                if (checkData && checkData.length > 0) {
                  for (let j = 0; j < checkData.length; j++) {
                    if (dataList[i].attachName == checkData[j].attachName) {
                      this.radio.push(dataList[i])
                      console.log('  this.radio', this.radio)
                      // this.handlechaeck(dataList[i])
                    }
                  }
                }
              }
            }
            this.loading = false
            this.userList = dataList
            console.log('  this.radio', this.radio)
          })
        })
      })
    },

    handleQuery() {
      this.getList()
    },

    save() {
      // console.log('this.radio', this.radio)
      this.$emit('attachselect', this.radio)
      this.dialogVisible = false
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = []
      this.resetForm('queryForm')
      this.handleQuery()
    },
  },
}
</script>