在el-table里嵌入复选框的方式

1,template 里的代码

<el-button size="mini" @click="handlePrint1">打印</el-button>
<el-table stripe border size="mini" height="100%" ref="tableRef" row-key="id" :data="dataSource" @selection-change="handleSelectionChange">
  <el-table-column align="center" :selectable="selectable" type="selection" width="40" />
  <el-table-column label="序号" align="center" width="50" type="index" fixed />
  <el-table-column label="打印" align="center" fixed="right" width="80" v-if="showButton">
    <template slot="header">
      <span style="margin-right: 4px;">打印</span>
      <el-checkbox :disabled="dataSource.length === 0" v-model="tempCheckPrint"   @change="handlePrintAll" />
    </template>
    <template #default="{ row }">
      <el-checkbox size="mini" v-show="row.problem_check_flag !=='0'" v-model="row.print_flag" />
    </template>
  </el-table-column>
</el-table>

2,script里的代码,注意，每次获取列表数据的时候，都要给row数据增加一个值print_flag，用来回显复选框的(getList)

export default {
  name: 'test1',
  computed: {
    selectArr() {
      return this.dataSource.filter(ele => {
        if (!!ele.print_flag) {
          return ele
        }
      })
    }
  },
  data() {
    return {
      total: 0,
      dataSource: [],
      loading: false,
      selection: [],
      showButton: true,
      tempCheckPrint: false
    }
  },
  methods: {
    handlePrint1() {
      let id= this.selectArr.map(ele => {
        return ele.id
      })
    },
    handlePrintAll() {
      if (!this.dataSource.length) {
        return
      }
      let dataSource = cloneDeep(this.dataSource)
      dataSource.forEach(ele => {
        if (ele.problem_check_flag !== '0') {
          ele.print_flag = this.tempCheckPrint
        }
      });
      this.dataSource = dataSource
    },
    selectable(row) {
      return row.problem_check_flag === '0'
    },
    handleSelectionChange(selection) {
      this.selection = selection;
    },
    getList() {
      this.tempCheckPrint = false
      let res = []
      this.dataSource = res.map(ele => { return { ...ele, print_flag: false } })
    }
}