iview中table多选、加载更多、下载等使用

记录工作中的点点滴滴，为回忆过往添加片片记忆...

一、Table

1.使用render函数多层渲染以及表格可展开使用

源码地址：https://gitee.com/Mandy_wang/iview-test

h('div',[h('span',{style:{color: 'red'}},'内容'),h('span',{style:{color: 'red'}},'内容'),h('span',{style:{color: 'red'}},'内容')])

render: (h, params) => {
            let check = h(
              "Button",
              {
                props: {
                  type: "text",
                  // icon: "md-eye",
                  size: "small",
                  disabled: params.row.batch_type === 1 && params.row.batch_mode === 3|| params.row.batch_type === 3 && params.row.batch_mode === 1?false:true
                },
                style: {
                  fontSize: "14px",
                  color: "#3A64FF",
                  padding: 0,
                  marginRight: '24px'
                },
                on: {
                  click: () => {
                    if (params.row.batch_type === 1 && params.row.batch_mode === 3) {
                      this.telent_id = params.row.batch_no
                      this.telentModal = true
                      this.handleGetTelent()
                    }
                    if (params.row.batch_type === 2) {
                      // this.$router.push({
                      //   name: "waiting_paper/:id",
                      //   params: { id: params.row.id },
                      // });
                      this.paperModal = true
                    }
                    if (params.row.batch_type === 3  && params.row.batch_mode === 1) {
                      this.orgModal = true
                      this.orgModal_id = params.row.id
                      this.dispatchTask()
                    }
                  },
                },
              },
              "查看"
            );
            let send_order = h(
              "Dropdown",{
                props: {
                  placement: 'bottom',
                  transfer: true
                },
                on: {
                  'on-click': (name)=>{
                    if (name=='time') {
                      this.modal1 = true
                      this.getTime()
                      this.id = params.row.id
                    } else if (name=='operator'){
                      this.id = params.row.id
                      this.optionUserInfo()
                      this.modal2 = true
                    }
                  }
                }
              },
              [
                h('a',
                  {
                    style:{
                      color:'#3A64FF'
                    }
                  },
                  [
                    '配置',
                    h('Icon',{
                        props: {
                          type: 'ios-arrow-down'
                        },
                        style: {
                          marginLeft: '5px',
                          color: '#3A64FF'
                        }
                      }
                    )
                  ]
                ),
                h('DropdownMenu',
                  {
                    slot: 'list',
                    props: {
                      trigger: 'hover'
                    }
                  },[
                    h('DropdownItem', {
                      props: {
                        name: 'time'
                      }
                    }, '配置时间'),
                    h('DropdownItem', {
                      props: {
                        name: 'operator'
                      }
                    }, '配置操作员')
                  ]
                )
              ])
            let option = [];
            option.push(check);
            option.push(send_order)
            return h("div", option);
          },

2.下载表格时请求接口添加responseType: 'blob'

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

3. 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>

4.table复选框多选

1. 在 data赋值后添加

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

2. 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)  // 选中数组合并到选中列表中
       },
   

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

   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',
         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 // 不显示加载按钮
        }
    })
},