项目终于是告一段段落了【带图】，小结一下这半个月以来使用vue-element的一些小结，也让初学者犯晕的章节
image.png
1 父子间传值是vue项目的命脉
- 1.1 父组件向子组件传值
// 父组件中伪代码
<子组件 :test="我要传递的值" />
// 子组件中代码
props: ['test'],
mounted() {
//挂载后传值
this.sonrowinfo = this.$props.rowinfo
},
this.$props.test // 获取父传子的参数
- 1.2子组件向父组件传值
// 父组件中伪代码
<子组件 @test="test[这个方法是子组件触发的]" />
// 子组件伪代码
this.$emit('test',传递的参数)//通过事件触发子向父传值
- 1.3 还会有这个场景，通过父组件的事件机制主动触发子组件的方法例如弹出层的弹出功能
this.$refs.【标签的ref参数名】.【变量/方法】
2 弹出层【el-dialong】会有一层遮罩
2.1 只针对弹出一层的情况下
- :modal-append-to-body="false"
2.2 弹出多层时候有遮罩
- append-to-body
3 图片png,jpp和pdf文件的预览
- 这里需要区分开来，png,jpg图片可以通过base64来显示，但是pdf只能通过字节流的形式来显示
- 1.1 base64的形式
<el-image :src="base64的字符串"> - 1.2 pdf形式的文件流显示
// 这里我需要明确，我试过用request请求的方式返回但是发现字节流在json_encode会返回错误的信息因此改用原始的方法来获取
axios.post(process.env.VUE_APP_BASE_API+'/service/xxx/xxx', { id_attachment: val.id_attachment },{responseType:'arraybuffer'}).then(res => {
const binaryData = []
binaryData.push(res.data)
//获取blob链接
this.pdfUrl = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' }))
window.open(this.pdfUrl)
})
image.png
image.png
4 对象的实现交集
5 linux下安装node环境
6 php缺少lib
- 重启nginx和php-fpm
element表格数据变化不渲染的问题
this.tableData = [...response.data] //这样就可以重新发生变化渲染
或者this.$set(...)
先记录到这里吧后面应该还有很多要记录的
