项目小结

1、项目介绍

vue开发，vuex,router+element-ui,

2、小结

1) 同一路由下（同一页面下）展示俩个表格数据（且分页），表格1点击行进入表格2，用同一组件，方法公用，数据不能影响。

解决思路：父子组件，兄弟组件

原理：vue.js组件的作用域是独立

• 父组件模板在父组件作用域内编译，父组件模板的数据用父组件内data数据；
• 子组件模板在子组件作用域内编译，子组件模板的数据用子组件内data数据，如果要用父组件的必须用props传递；
• 子组件标签的数据，使用父组件内的data数据

2）多个图片上传入口，用list渲染

• imagetypelist首先初始化定义几个list,根据类型判断相关条件，比如示例就第一类入口可以多图片上传，后面只能传一张图片；
• :on-success="(response, file, fileList) => uploadsuccess(index, item, response, file, fileList)"　　根据index判断当前操作的是第即类入口

<div v-for="(item, index) in imagetypelist" :key="index" :slot="'sceneImages' + item.imageType">
                <el-upload
                    v-show="!item.imagePath || item.imageType === 1"
                    :headers="token"
                    :ref="'uploaduserlogo' + item.imageType"
                    class="mini-upload"
                    action="xxx"
                    list-type="picture-card"
                    :on-success="(response, file, fileList) => uploadsuccess(index, item, response, file, fileList)"
                    :auto-upload="true"
                    name="avatarfile"
                >
                    <i slot="default" class="el-icon-plus"></i>
                </el-upload>
                <div class="imgdis-div" v-show="item.imagePath">
                    <el-scrollbar style="height: 100%">
                        <div class="imgdis-li-img" v-for="(img, idx) in item.imagePath.split(',')" :key="idx">
                            <i class="el-icon-delete" @click="delformphoto(index, 'uploaduserlogo' + item.imageType)"></i>
                            <img :src="envConfig.baseImgApi + img" alt="" width="60" height="60" />
                        </div>
                    </el-scrollbar>
                </div>
            </div>

 

3）表格中Checkedbox 渲染及 选中方法　　

@change="(checked) => checkRow(checked, item.prop)"

<el-table :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column :prop="item.prop" :label="item.label" v-for="(item, index) in cols" :key="index">
                <template slot="header" slot-scope="scope">
                    <span v-if="!item.checkbox">{{ item.label }}</span>
                    <el-checkbox v-else :scope="scope" v-model="checkList[item.prop]" @change="(checked) => checkRow(checked, item.prop)">{{
                        item.label
                    }}</el-checkbox>
                </template>
                <template slot-scope="scope">
                    <span v-if="!item.checkbox">{{ scope.row[item.prop] }}</span>
                    <el-checkbox v-else v-model="scope.row[item.prop]" @change="(checked) => tableCheckboxChange(item.prop)"></el-checkbox>
                </template>
            </el-table-column>
        </el-table>

checkRow(val, prop) {
            if (val) {
                this.tableData.forEach((item) => {
                    item[prop] = true;
                });
            } else {
                this.tableData.forEach((item) => {
                    item[prop] = false;
                });
            }
        },
        tableCheckboxChange(prop) {
            if (prop) {
                this.checkList[prop] = this.tableData.every((item) => item[prop] === true);
            } else {
                for (const itemprop in this.checkList) {
                    if (this.checkList.hasOwnProperty(itemprop)) {
                        const element = this.checkList[itemprop];
                        let testvalue = this.tableData.every((item) => item[itemprop] === true);
                        this.checkList[itemprop] = testvalue;
                    }
                }
            }
        },

4）mixins  混入

5）注意点：

• ref不能重名；
• node-key不能相同，不能为0