项目小结
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