iview使用记录: iview使用记录

1.Table 表格

输入图片说明

table中组件渲染
多层嵌套渲染

2.Upload 上传

<Upload
:headers="auths"
:action="userImport"
:show-upload-list="false"
:format="['xls','csv','xlsx']"
:on-success="afterImport">
    <Button type="primary"  style="background-color: #fff;color:#204DF2;border-color:#204DF2"><icon custom="iconfont icon-shangchuan"  style="margin-right:12px"></icon>上传信息</Button>
</Upload>

3.下载表格数据api

// 下载数据
export const downLoad = () => {
  return axios.request({
    url: '/api/user/download',
    method: 'get',
    responseType: 'blob'  // 这个是必须的
  })
}

4.table复选框多选

在 data赋值后添加

this.data.forEach(item => {
    item._checked = this.checkList.some(it => it.id == item.id)
})
// 点击分页进入时判断当前数据是否已勾选  勾选的显示勾选

table 点击事件 on-selection-change 方法中添加

Select (sel) {
      this.checkList = this.checkList.filter(item => !this.data.some(it => it.id == item.id)) // 过滤掉id没有选中的数据
      this.checkList.push(...sel)  // 选中数组合并到选中列表中
    },

复选框中已选中数据禁止点击

if(item.is_exit ){
    obj['_disabled'] = true
} else{
    obj['_disabled'] = false
}
return obj  // 遍历数据中的每个元素，每个元素已经使用过的_disabled为true 否则为false

5.使用slot代替render函数

<Table border :columns="columns12" :data="data6">
    <template slot-scope="{ row }" slot="name">
        <strong>{{ row.name }}</strong>
    </template>
    <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">View</Button>
        <Button type="error" size="small" @click="remove(index)">Delete</Button>
    </template>
</Table>

js中内容

columns12: [
    {
        title: 'Name',
        slot: 'name'
    },
    {
        title: 'Age',
        key: 'age'
    },
    {
        title: 'Address',
        key: 'address'
    },
    {
        title: 'Action',
        slot: 'action',
        width: 150,
        align: 'center'
    }
],

6.加载更多

输入图片说明源码：https://gitee.com/Mandy_wang/iview-test/tree/master/src/views/institutions

<span @click="loadMore" v-if="isShowAll" class="btn">
    加载更多
    <Icon type="md-arrow-round-down" class="icon" />
</span>  
<!--isShowAll: false, // 判断是否已显示完所有的数据-->

loadMore() {
    this.switchList = true    //  switchList:false,//是否加载更多
    this.pageNum += 1
    this.showNext() 
},
 // 删除时  this.switchList = false

showNext () {
    let list = []
    let params = {
        page:this.pageNum,
        page_size: this.pageSize,
    }
    getDatalist(params).then(res=>{
        list = res.data
        if (this.switchList) {
            // 加载更多时
            this.son.push(...list)
        } else {
            this.son = list
        }
        if (this.son.length < res.data.data.total) { // 判断当前数据小于总数时
            this.isShowAll = true  // 继续显示加载按钮
        } else {
            this.isShowAll = false // 不显示加载按钮
        }
    })
},

Mandy_wang / iview使用记录

1.Table 表格

2.Upload 上传

3.下载表格数据api

4.table复选框多选

5.使用slot代替render函数

6.加载更多

简介

发行版

贡献者

近期动态

Mandy_wang / iview使用记录 .gitee-modal { width: 500px !important; }

1.Table 表格

2.Upload 上传

3.下载表格数据api

4.table复选框多选

5.使用slot代替render函数

6.加载更多

简介

发行版

贡献者

近期动态

搜索帮助

Mandy_wang / iview使用记录