iview - 笔记

1. table 序号分页后序号从1开始

{
    type: 'index2',
    width: 60,
    align: 'center',
    render: (h, params) => {
        return h('span', params.index + (this.pageIndex- 1) * this.pageSize + 1);
    }
}
//pageIndex 当前分页页码; pageSize 每页条数
//点击切换分页的时候，将点击的值赋值给pageIndex，这样保证点击分页的时候，序号也会跟着变化。
changePage (index) {
   this.pageIndex = index
   ..
}

2. table 前端分页

<Page
     :total="count"
     size="small"
     @on-change="changePage"
     show-total
     show-elevator
 />


请求数据后：
this.count = this.list.length
this.changePage(1)

changePage(page){
   this.tableData.splice(0, this.tableData.length);
   this.tableData=this.list.slice((page - 1) * 10,page * 10);
   this.pageIndex = page
}

3. table里面的按钮 ，需要用render函数处理

比较常用的是button跟switch

render: (h, params) => {
  return h('div', [
    h('Button', {
      props: {
        type: 'info',
        size: 'small'
      },
      style: {
        marginRight: '6px'
      },
      on: {
        click: () => {
          
        }

      }
    }, '详情'),
    h('i-switch', {
      props: {
        value: params.row.enable
      },
      on: {
        input: () => {
          params.row.enable = !params.row.enable
        },
        'on-change': (value) => { // 触发事件是on-change,用双引号括起来，
          this.scheduleData.monday[params.index].enable = value
        }
      }
    })
  ])
}

4.render函数创建组件点击事件无效的解决方法

render里面的on 换成 nativeOn

• nativeOn: 用于监听组件，监听原生事件，而不是用于组件内部vm.$emit触发的事件。
• 因为我所用的是iview组件库，render所创建的同样是组件，于是这里使用on是没用的，组件和dom的区别。

5. modal 关闭前验证

只要点击了确定按钮，无论怎样都会关闭，return也没办法阻止，可用插槽解决

<div slot="footer" style="margin-left: 120px;">
    <Button style="margin-right: 10px" @click="closeModel">取消</Button>
    <Button type="primary" @click="handleSubmit('formValidate')">确认</Button>
</div>

6.iview icon打包后不显示图标

webpack.prod.conf.js文件修改：

extract:true

7. DatePicker 返回本地时间

通过v-model方法进行绑定，返回的数据是UTC格式的时间，可以将v-model绑定值去掉，加上@on-change="changeDate"

changeDate(date){
    console.log(date) //date就是返回我们本地的时间
}

8. upload default-file-list动态赋值不显示

axios获取数据是一个异步的过程，所以default-file-list赋值不成功，所以我们要数据获取成功之后再赋值；

this.defaultList = this.picDefaulList; //将获取到的值赋值到 defaultList 中
this.$nextTick(()=> { //赋值后马上更新
    this.uploadList = this.$refs.upload.fileList;
});

9. form 多重验证

多重验证包括第一要验不能为空，第二要验证限制的一些长度，写正则表达式等

ruleValidate: {
    mobile: [
        { required: true, message: '手机号不能为空', trigger: 'blur' },
        { type: 'string',pattern:/^[1][3,4,5,7,8][0-9]{9}$/, message:'请填写正确的手机号格式', trigger:'blur'},
   ],
}

参考：
https://blog.csdn.net/qq_41727900/article/details/81305036
https://www.jianshu.com/p/034afd50ac21