Vue+elementUI设计前端界面小问题总结

1.修改table内容数据后，table没有自动重新渲染：

直接对已有的数组进行赋值，不会触发视图的更新，需要使用this.$set()函数，具体可见上一条博客 点击跳转

2.将el-table居中的简单方法：

只需在el-table的外层套上

即可
即：

3.scope的理解

scope.$index获得当前行的行号
scope.row获得当前行的数据
例：{"row":{"name":"kongzhi1","age":"29","sex":"man"},"$index":0}

4.如何使用iconfont

在官网下载想要的icon图标代码后在Vue中包含，详情可见另一条博客 点击跳转

5.删除data数据数组中一行

调用函数splice()：this.tableData.splice(index,howmany);
其中 第一个函数index规定添加/删除项目的位置，即下标
第二个函数haomany规定删除项目的数量
在vue中调用可以直接触发视图更新

6.ajax中调用vue实例的data或函数的方法

在前端的$.ajax函数中想要调用vue实例的data，不能采用this.para的方式，因为在ajax中this并不指向vue实例，需要在ajax前设置vm = this，然后调用vm.para

created: function(){
vm =this
$.ajax({
        url:'xxxxxxxxxxxxxxxx',
        type:'post',
        data:{'tablename': this.table_name},
        dataType:'json',
        success:function(data){ //后端返回的json数据（此处data为json对象）
          vm.returnFields = data
        },
        error:function () {
        }
      });
}