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

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

（1）html代码部分

1.  
   <el-table v-loading="loading" :data="userList">
2.  
   <el-table-column label="" width="40">
3.  
   <template scope="scope">
4.  
   <el-checkbox-group v-model="radio" style="color: #fff;padding-left: 10px; margin-right: -25px;">
5.  
   <el-checkbox :label="scope.row" v-model="scope.row"></el-checkbox>
6.  
   </el-checkbox-group>
7.  
   </template>
8.  
   </el-table-column>
9.  
   <el-table-column label="附件名称" align="center" key="attachName" prop="attachName" />
10.  
    <el-table-column label="附件编码" align="center" key="attachCode" prop="attachCode" />
11.  
    <el-table-column label="描述" align="center" key="descript" prop="descript" />
12.  
    <el-table-column label="备注" align="center" key="remark" prop="remark" />
13.  
    <el-table-column label="状态" align="center" key="status">
14.  
    <template slot-scope="scope">
15.  
    <div v-if="scope.row.status==='0'">启用</div>
16.  
    <div v-else>停用</div>
17.  
    </template>
18.  
    </el-table-column>
19.  
    </el-table>
20.  
     

（2）js 代码

1.  
   <script>
2.  
   import { getAttachmentList, getFlowNode } from '@/api/flow/flowAttachment'
3.  
    
4.  
   export default {
5.  
   name: 'attachSelection',
6.  
    
7.  
   data() {
8.  
   return {
9.  
   radio: [],
10.  
    dialogVisible: true,
11.  
    loading: false,
12.  
    queryParams: {
13.  
    pageNum: 1,
14.  
    pageSize: 10,
15.  
    },
16.  
    userList: [],
17.  
    total: 0,
18.  
    form: this.treeData,
19.  
    TypeData: {},
20.  
    }
21.  
    },
22.  
    props: {
23.  
    treeData: Object,
24.  
    processData: {
25.  
    type: Object,
26.  
    required: true,
27.  
    },
28.  
    },
29.  
    watch: {
30.  
    // form 动态赋值
31.  
    treeData: function (newVal, oldVal) {
32.  
    this.form = newVal // newVal
33.  
    // this.law = newVal;
34.  
    //
35.  
    },
36.  
    },
37.  
    created() {
38.  
    this.getList()
39.  
    this.TypeData = this.processData
40.  
    },
41.  
     
42.  
    methods: {
43.  
    getList() {
44.  
    this.loading = true
45.  
    getAttachmentList(this.queryParams).then((response) => {
46.  
    // this.userList = response.rows
47.  
    let dataList = response.rows
48.  
    this.total = response.total
49.  
    let parameterData = {
50.  
    nodeId: this.form.id,
51.  
    actKey: this.TypeData.id,
52.  
    }
53.  
    this.$nextTick(() => {
54.  
    getFlowNode(this.addDateRange(parameterData)).then((res) => {
55.  
    //设置选中行
56.  
    let checkData = []
57.  
    checkData = res.rows
58.  
    if (dataList) {
59.  
    for (let i = 0; i < dataList.length; i ) {
60.  
    if (checkData && checkData.length > 0) {
61.  
    for (let j = 0; j < checkData.length; j ) {
62.  
    if (dataList[i].attachName == checkData[j].attachName) {
63.  
    this.radio.push(dataList[i])
64.  
    console.log(' this.radio', this.radio)
65.  
    // this.handlechaeck(dataList[i])
66.  
    }
67.  
    }
68.  
    }
69.  
    }
70.  
    }
71.  
    this.loading = false
72.  
    this.userList = dataList
73.  
    console.log(' this.radio', this.radio)
74.  
    })
75.  
    })
76.  
    })
77.  
    },
78.  
     
79.  
    handleQuery() {
80.  
    this.getList()
81.  
    },
82.  
     
83.  
    save() {
84.  
    // console.log('this.radio', this.radio)
85.  
    this.$emit('attachselect', this.radio)
86.  
    this.dialogVisible = false
87.  
    },
88.  
    /** 重置按钮操作 */
89.  
    resetQuery() {
90.  
    this.dateRange = []
91.  
    this.resetForm('queryForm')
92.  
    this.handleQuery()
93.  
    },
94.  
    },
95.  
    }
96.  
    </script>

这篇好文章是转载于：学新通技术网