在vue+element项目中遇到的问题

一、在VUE中使用el-dialog出现z-index值很大的遮罩解决办法
在 <el-dialog中加上 :modal-append-to-body="false"

二、给组件不同的key值,这样每次进入页面时,当key发生变化时,会释放原有组件重新加载改组件
例：<group :key="new Date().getTime()"></group >

三、vue 修改props值
父组件 传进去的时候加上 .sync
子组件 通过this.$emit(‘update:xxx’, params)
例：// 父组件

<todo-list :list.sync="list" />

// 子组件

methodName(index) {
    this.$emit('update:list', this.newList)
}

四、el-dialog 动态修改 title 值

1. 定义一个el-dialog，设置“:title”
   --------------注意title前面需要加冒号--------------

<el-dialog :title="dialogTitle" :visible.sync="dialogVisible"> 
</el-dialog>

2. 初始化变量（ 定义 dialogTitle 变量 ）

export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      dialogTitle:'',//对话框标题
      dialogVisible: false,//是否显示新增窗口
	}
  }
}

五、vue.js中如何获得当前元素的文字信息

<li>
      <span @click="getSpanText(event)">关于公众号使用问题</span>
</li>

当我点击这个li标签的时候，我想要获得span里面的文字，可以使用这个方法：

getSpanText: function(e){
   console.log(e.target.innerText);
 }

六、vue elementUI添加数字校验

<el-form-item label="价格" prop="price">
  <el-input
  	oninput="value=value.replace(/[^\d|.]/g,'')"
    @blur="form.price = $event.target.value"
    v-model="form.price"
    placeholder="请输入价格"
   />
</el-form-item>

<script>
　// 校验规则
let validatorPrice = (rule, value, callback) => {
  if (!value) return callback(new Error('请输入金额'))
  if (!Number(value)) return callback(new Error('请输入数字值'))
  // let reg = /^(([1-9]{1}\d*)|(0{1}))(\.\d{0,2})$/g; //小数限制0-2位
  let reg = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
  if (!reg.test(value)) return callback(new Error('请输入正确价格'));
  callback();
}
...
rules: {
	price: [{required: true, validator: validatorPrice, trigger: "blur"}],
	...
},
</script>

七、elemenUI的input框设置了clearable属性后清空按钮不起作用

<el-input
     size="medium"
     v-model="searchForm.mac"
     @input="change()"
     clearable></el-input>
change(){
    this.$forceUpdate();
},

八、el-table 显示所有数据，不显示纵向滚动条
只要把height 属性去掉，默认就是显示所有数据，不显示纵向滚动条。