vue+element 当el-table中使用el-checkbox全选视图不更新解决方法_周家大小姐.的博客

相关文章推荐
机灵的鸵鸟 · 查询/删除/建立DB2数据表的主键 - ...· 2 周前 ·
有胆有识的鼠标垫 · (gdb) break ...· 2 周前 ·
热情的柿子 · 解决方案（一）— Ant-design ...· 1 周前 ·
大方的烤地瓜 · Python学习笔记：pandas透视表之p ...· 1 周前 ·
打酱油的猴子 · 记一个报错 ResizeObserver ...· 1 周前 ·
知识渊博的柠檬 · 从开摆到烂尾，锐评《德凯奥特曼》 - 知乎· 1 年前 ·
傲视众生的酱肘子 · 习近平：新时代的领路人 _ 最新报道 ...· 1 年前 ·
单身的碗 · 橙光游戏列表 - 简书· 1 年前 ·
有情有义的柳树 · 第36话情人-总裁在下-漫画牛· 1 年前 ·
坏坏的山羊 · 山西两家化工企业涉偷排废水 ...· 1 年前 ·
<template>
        <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>
备注：不要自己设置请求头类型，让浏览器自己解析，如果在main.js中配置了post参数序列化的可能会导致浏览器解析上传文件格式错误（415错误Unsupported Media Type）；请将此配置注释掉；
 async uploadFile(params) {
     		// 可以在上传之前就行文件类型和大小处理
            var formData = new FormData();
            formData.append('annex', params.file);
                                    2022/09/02更新：
下边网友发现有新的方案：https://github.com/guolaopi/element-plus-table-dragable-demo 有上网条件的可以直接去github下载。
没有上网条件的可以在这里下载已经更新。
说明：本人前端小白不是什么骗子（我有4.5k多分没啥毛用），之前没有现成的组件就用Vuedraggable来实现，功能实现了但是不太友好。
=======以下是之前的说明=====
原创亲测至少节约小白两天时间，本人前端小白搞了好几天才实现表格拖动排序。在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在Vuedraggable里使用element组件提供了实际应用参考。table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。
需要安装依赖：npm i -S vuedraggable@next
即可根据下标删除数组中对应的对象。
补充知识：vue-element-upload 文件上传打开选择文件弹框前进行提示或操作
在项目中使用文件上传功能时，需求是不能直接弹出弹框，要先二次确认或进行提示。引申开来，即可在打开选择文件弹框之前，做一系列操作。
实现思路在基于element-upload组件的基础上，再加一个按
table数据添加勾选属性itemCheck，默认为false
表头添加render函数，渲染el-checkbox，绑定chang事件
在change事件中处理table数据，给itemCheck重新赋值，改变行勾选状态
改变行勾选状态，处理表头全选、部分选中、取消全选状态
处理table数据
for (let val of data) {
       val.itemCheck = false;
 this.dataList = dat
                                    先说一下我的场景：
就是在表格里面选择某种产品，然后把这些产品加入订阅单，点击订阅单，就出现下面的图片，默认所有的产品全选，我就给所有数据加了一个chenked为true的属性
遇到的问题：由于数据是从表格传过来的，然后点击发布渠道，发现控制台数据变了，但是视图并没有更新，如下图：我点击测试模型，控制台打印为false，但是视图就是不改变
原因：由于我传过来的数据是数组，如下图，数组中数据发生变化，vue是侦听不到的，但是重写的这几个数组的方法（比如splice()、pop、push等）修改的数组是可
                                    创建表格 添加 @select-all=“selectAll” @select=“selectAnalysis” ref=“multipleTable”
<el-table @select-all="selectAll" ref="multipleTable" @select="selectAnalysis" v-loading="loadingAnalysis" style="margin-top: 10px"  height="350px" :data="analysisData" border 
                                    用Element的组件Table表格，当使用树形数据再配合上多选框，如下：
会出现一种问题，点击左上方全选，只能够选中一级树节点，子节点无法被选中，如图所示：
想要实现点击全选就选中所有的表格，要另想办法，方法如下：
1、首先给table设置一个ref；
2、绑定一个@select-all方法；
3、定义一个变量，来识别全选框是否被选中，默认为未被选中；
checkedKeys: false,
4、@select-all绑定的方法如下，Element的Table表格中，select-all表示当用