前端开发

1下载vscode，先要安装node，npm安装vue-cli脚手架，在vscode的添加扩展的时候，有时不能成功添加，直接去官网下载https://marketplace.visualstudio.com/VSCode，然后把下载的放到安装vscode的bin目录下，然后在这个bin中cmd打开命令窗口

code --install-extension 文件名    

还有另一种简单的在vscode的扩展里有...符号，选择从VXIS安装也行 

[Node.js]npm使用国内镜像源
复制代码
永久设置：
npm config set registry http://registry.npm.taobao.org
查看设置：
npm config get registry

全局安装 vue-cli ，在命令提示窗口执行：
npm install -g @vue/cli

提示缺少python
npm install node-sass@4.14.1

Warning: Accessing non-existent property ‘cd‘ of module exports inside circular dependency
出现这种问题就是因为当前node版本过高导致，解决办法：
可切换node至v10.版本
升级shelljs到 v0.8.4 即可解决
升级shelljs：npm install shelljs@0.8.4 --save

启动vue项目时报错，npm ERR! Failed at the node-sass@4.14.1 postinstall script. 下载源修改一下就好了：

npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass

运行完成后重新下载

npm install 

------------恢复内容开始------------

1下载vscode，先要安装node，npm安装vue-cli脚手架，在vscode的添加扩展的时候，有时不能成功添加，直接去官网下载https://marketplace.visualstudio.com/VSCode，然后把下载的放到安装vscode的bin目录下，然后在这个bin中cmd打开命令窗口

code --install-extension 文件名    

还有另一种简单的在vscode的扩展里有...符号，选择从VXIS安装也行 

[Node.js]npm使用国内镜像源
复制代码
永久设置：
npm config set registry http://registry.npm.taobao.org
查看设置：
npm config get registry

全局安装 vue-cli ，在命令提示窗口执行：
npm install -g @vue/cli

提示缺少python
npm install node-sass@4.14.1

Warning: Accessing non-existent property ‘cd‘ of module exports inside circular dependency
出现这种问题就是因为当前node版本过高导致，解决办法：
可切换node至v10.版本
升级shelljs到 v0.8.4 即可解决
升级shelljs：npm install shelljs@0.8.4 --save

启动vue项目时报错，npm ERR! Failed at the node-sass@4.14.1 postinstall script. 下载源修改一下就好了：

npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass

运行完成后重新下载

npm install 

 

2 对象的赋值会覆盖属性吗

form: {a:1,b:2,c:3},

  this.form = Object.assign({}, {})

form变成了什么？

form 变成了{}，在es6中需要给form 添加属性时直接

form.e=233
form.d=234

 提交form表单时，自己写的验证函数

let min = (rule, value, callback) => {
			if (Number(value) >= Number(this.form.valueMax)) {
				callback(new Error("下限不能大于或等于上限"))
			} else {
				callback()
			}
		}       不管成功与否，都要返回

　　

rules: {valueMin: [{ validator: min, trigger: "blur" }]

然后在按钮事件里面验证this.$refs["appDataForm"].validate(valid => {if (valid) {逻辑代码} }）

 elements中用table绑定数据，有一列的数据是一个数组时

<el-table-column prop="穿过来的数组名" label="检测对象" :formatter="formatData"></el-table-column>

在方法中

formatData(row) {
			var name = []
			var row = (row && row.数组名) || []
			row.forEach(item => {
				name.push(item.name)    对象中的属性值，根据需求取
			})
			return name.join(";")
		}

　父组件传值改变子组件的值

 子组件

<template>
    <div>
        <el-dialog :title="dialogTitle" :visible.sync="isClose" width="70%">
            <div class="pagingcontent">
                <el-table ref="mainTable" :data="detailData" v-loading="loading" tooltip-effect="dark" class="table">
                </el-table>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: "dialog1",
    data() {
        return {
            isClose: false
        }
    },
    watch: {
        //这里需要重新定义一个变量来绑定值
        isVisible(val) {
            this.isClose = val          //这个是父组件通过绑定属性isVisible传过来的值
        },
        isClose(val) {
            if (!val) this.$emit("closeDialog", val)   //子组件通过这个事件名称（自定义）将值传给父组件
        }
    },
    props: {
        isVisible: {
            type: Boolean,
            default: true
        },
        dialogTitle: {
            type: String,
            default: ""
        },
        detailData: {
            type: Array,
            default: () => []
        },
        loading: {
            type: Boolean,
            default: false
        }
    }
}
</script>

父组件

<dialog1 :isVisible="show" @closeDialog="closeDialog" :dialogTitle="dialogTitle" :detailData="detailData" ></dialog1>   父组件通过事件获取子组件传过来的值

 下面是修改已存在的样式添加 lang=“scss” 不能与scoped共同使用 （这样回变成全局的，所以要在外层加一个class）

在class=“logMgCls” 下有个span元素就可以按下面格式写

<style lang="scss">
.logMgCls {
    .el-select__tags {
        span {
            max-width: 500px !important;
            text-overflow: ellipsis !important;
            overflow: hidden !important;
            white-space: nowrap !important;
        }
    }
    .el-input {
        input {
            width: 500px;
        }
    }
}</style>

 iview中table渲染，动态改了数据，但是界面没有显示

修改思路

1声明一个新的临时数组，来接受这个数组

2清空这个数组

3遍历临时数组，将遍历的项添加到这个数组中

var tempList=this.list;
this.list=[];

tempList.forEach(item=>{
  //其他业务逻辑代码
 this.list.push(item);

})