vue+element 当el-table中使用el-checkbox全选视图不更新解决方法

加一个key就好了;
代码:

<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" key="ruleForm" ref="ruleForm" label-width="130px">
            <el-row>
                <el-col :span="8">
                    <el-form-item class="w80" label="数据源:" prop="data">
                        <el-select v-model="ruleForm.data" placeholder="请选择数据源">
                            <el-option label="数据源1" value="sourceList1" />
                            <el-option label="数据源2" value="sourceList2" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item class="w80" label="数据表:" prop="data2">
                        <el-select v-model="ruleForm.data2" placeholder="请选择数据表">
                            <el-option label="数据表1" value="sourceList1" />
                            <el-option label="数据表2" value="sourceList2" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item class="w80" label="数据表:">
                        <el-table key="tableData" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                            <el-table-column type="index" label="序号" width="50" align="center">
                            </el-table-column>
                            <el-table-column prop="date" label="字段名" align="center">
                            </el-table-column>
                            <el-table-column prop="date2" label="字段中文名" align="center">
                            </el-table-column>
                            <el-table-column prop="date3" label="字段类型" align="center">
                            </el-table-column>
                            <el-table-column prop="parameter" label="返回参数" align="center" :key="checkAll">
                                <template slot="header">
                                    <el-checkbox size="mini" v-model="checkAll" @change="handleCheckAllChange">返回参数</el-checkbox>
                                </template>
                                <template slot-scope="scope">
                                    <el-checkbox size="mini" v-model="scope.row.parameter" @change="handleChecked"></el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column prop="parameter2" label="是否必填" align="center">
                                <template slot-scope="scope">
                                    <el-checkbox size="mini" v-model="scope.row.parameter2"></el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column prop="parameter3" label="请求参数" align="center">
                                <template slot-scope="scope">
                                    <el-checkbox size="mini" v-model="scope.row.parameter3"></el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column prop="format" label="显示格式" align="center">
                                <template slot-scope="scope">
                                    <el-select size="mini" v-model="scope.row.format" placeholder="请选择数据表">
                                        <el-option :label="item.label" :value="item.value" :key="i" v-for="(item,i) in formatList" />
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="dictionaries" label="字典项" align="center">
                                <template slot-scope="scope">
                                    <el-select size="mini" v-model="scope.row.dictionaries" placeholder="请选择数据表">
                                        <el-option :label="item.label" :value="item.value" :key="i" v-for="(item,i) in dictionariesList" />
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="operationType" label="操作类型" align="center">
                                <template slot-scope="scope">
                                    <el-select size="mini" v-model="scope.row.operationType" placeholder="请选择数据表">
                                        <el-option :label="item.label" :value="item.value" :key="i" v-for="(item,i) in operationTypeList" />
                                    </el-select>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="step2-foot">
            <div style="text-align: center">
                <el-button @click="back">上一步</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'paramConfig',
    props: {},
    components: {},

    data() {
        return {
            ruleForm: {
                multipleSelection: []
            },
            tableData: [{
                date: 'XM',
                date2: '王小虎',
                date3: '字符型（string）'
            }, {
                date: 'XB',
                date2: '姓名',
                date3: '字符型（string）'
            },],
            operationTypeList: [],
            dictionariesList: [],
            formatList: [],
            rules: {
                data: { required: true, message: '请选择数据源', trigger: 'change' },
                data2: { required: true, message: '请选择数据表', trigger: 'change' }
            },
            checkLen: 0,
            checkAll: false
        }
    },
    computed: {},
    beforeMount() { },
    mounted() { },
    methods: {
        // 全选
        handleCheckAllChange(val) {
            console.log(val)
            const newData = this.tableData.map(item => {
                return {
                    ...item,
                    parameter: val
                }
            })
            this.tableData = newData
            if (val) {
                this.checkAll = true
                this.checkLen = newData.length
            } else {
                this.checkAll = false
                this.checkLen = 0
            }
        },
        handleChecked(val) {
            this.checkLen = val ? this.checkLen + 1 : this.checkLen - 1
            this.checkAll = this.checkLen == this.tableData.length
        },
        handleSelectionChange(val) {
            this.ruleForm.multipleSelection = val
        },
        back() {
            this.$emit('back')
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    const params = {
                        isActive: this.isActive
                    }
                    this.$emit('next', params)
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        }
    }
}

</script>
<style lang='scss' scoped>
</style>