view-design 踩坑

1.iview控制表格列的隐藏或显示：columns1是表头数组，cover代表表头的key

this.columns1 = this.columns1.filter(col => col.key !== 'cover') 

2.iview page组件中on-page-size-change方法会先触发on-change方法，也就是改变page-size时当前page会变成默认值1,也就是说当前页不为1时切换page-size会触发两个函数，导致请求两次接口。

解决方法: 当前页不为1时切换分页只执行currentChange的逻辑操作

currentChange (c) { 
    this.current = c 
　　// 请求列表
}, 
pageSizeChange (page_size) {
 this.page_size = page_size
 if (this.current === 1) {
 　　// 请求列表
  }
}

 

3.动态计算表格高度适配分辨率：

mounted () {
 window.onresize= ()=> {
 const screenHeight= document.documentElement.clientHeight
 const tableHeight= screenHeight- 200 // 200可以调整     
 this.$store.commit('getTableSize', tableHeight)
 }    

4.表格固定列时显示错乱，要给表头一个固定高度

/deep/.ivu-table-fixed-header thead tr th { height:48px; }

5.在动态计算表格的情况下，固定列的高度是按表格最大高度计算的，所以要给它高度重新计算

/deep/.ivu-table-fixed, .ivu-table-fixed-right { height:100% !important; }

6.在vue.config.js文件中引入transpileDependencies: ['view-design']

7.三级菜单：是menuItem的上面的所有Submenu的集合，eg: this.openNames = [ '/menu' , '/menu/add' ]

/deep/ .ivu-menu-child-item-active { 
    color: $bg; 
}

/deep/.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) { 
  color: #fff; 
  background-color: #2d8cf0; 
}

/deep/.ivu-menu { 
  height: 100%; 
  width: 13rem !important; 
} 

/deep/.ivu-layout.ivu-layout-has-sider > .ivu-layout, .ivu-layout.ivu-layout-has-sider > .ivu-layout-content {
  overflow-y: hidden; 
}

 8.Modal 本质上通过控制display的方式渲染的，最好在调用的时候加上一个v-if

9. 控制Modal 

子组件：

 <Modal
      :value="isBookModal"
      @on-visible-change="showChange">

props: {
  isBookModal: {
    type: Boolean,
    default: false
　}
}
showChange (v) {
      this.$emit('update:isBookModal', v)
}

父组件

 <bookModal :isBookModal.sync="isBookModal" v-if="isBookModal"></bookModal>

10. Menu的on-select方法返回自定义参数

 <Menu mode="horizontal" theme="light" @on-select="(key) => clickMenu(key, l.type)"></Menu>

 clickMenu (name, type) {
    console.log(name, type)    
}

11. Page分页组件封装

 <Page
      :total="total"
       show-sizer
       show-total
       show-elevator
       prev-text="上一页"
       next-text="下一页"
       :current="current"
       :page-size="pageSize"
       @on-change="changePage"
       :page-size-opts="pageOpts"
       placement="top"
       @on-page-size-change="changePageSize"/>
  </div>
</template>
<script>
export default {
  name: 'Pagination',
  props: {
    total: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 10
    },
    current: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      pageOpts: [10, 20, 50, 100]
    }
  },
  methods: {
    changePage (current) {
      this.$emit('update:current', current)
      this.$emit('change', current)
    },
    changePageSize (pageSize) {
      this.$emit('update:pageSize', pageSize)
      if (this.current === 1) {
        this.$emit('change', pageSize)
      }
    }
  }
}
</script>

引用：

 <Pagination :total="total" :current.sync="current" :page-size.sync="pageSize" @change="getList"></Pagination>

12. table render函数中使用外部样式表中的class时，该class需要用deep

13. 使用Select和Select的remote 和 filter这样的远程搜索框联动时：

 <Select 
  v-model="form.lib_type"
 :placeholder="`请选择类型`"
 @on-change="clearValue" >
        <Option
              v-for="item in typeList"
              :value="item.value"
              :key="item.value"
               >
    {{ item.label }}
    </Option>
</Select>

 <Select
       v-model="form.id"
        filterable
        remote
        :remote-method="selfOrgList"
        :placeholder="`请输入名称`"
         ref="select"
         :loading="isSelectLoading"
          v-if="isChange"
           >
          <Option
                v-for="option in options"
                :key="option.id"
                :value="option.id"
              >
         {{ option.name }}
         </Option>
 </Select>         

切换第一个select第二个select会出现暂无数据的情况，但此时options里面是有数据的。

// 清空选项
  async clearValue () {
      this.reloadSelect()
      this.form.id = ''
      this.options = []
      await this.getList(this.form.type)
}
// 重新加载组件
 reloadSelect () {
      this.isChange = false
      this.$nextTick(() => {
        this.isChange = true
      })
    }

  mounted () {
    this.reloadSelect()
  }

这样怎么切换都都不会出现暂无数据的情况了...

 14. 使用表格和分页组件时给表格设置了高度，翻页时滚动条不会重置。

解决方法： 使用全局的指令重置

Vue.directive('table-scroll', (el, binding) => {
  if(binding.value){
    el.__vue__.$refs.body.scrollTop = 0;
    el.__vue__.$refs.body.scrollLeft = 0;
  }
});

// isLoading 是表格的loading
 <Table v-table-scroll="isLoading"></Table>

 15. DatePicker 一直显示，也就是伪日历

// template  
<DatePicker
            open
            confirm
            @on-change="changeDate"
            @on-open-change="changeOpen"
            ref="date"
            :value="date"
            type="date">
            <span></span> // slot
          </DatePicker>
// script
    changeDate (value, type) {
      this.date = value
    }

   mounted () {

    // on-open-change事件会阻塞页面的其他事件，所以先把on-open-change事件执行掉 calendar-flex是页面的其他元素

    this.$nextTick(() => {
      document.getElementsByClassName('calendar-flex')[0].click()
    })
  }

// scss
/deep/.ivu-select-dropdown {
  box-shadow: unset;
  border-radius: unset;
  display: block !important; // 一直显示
}
/deep/.ivu-picker-confirm {
  display: none; // 不显示确定按钮
}

手动控制选择器的显示状态，open confirm slot要一起使用，这样就可以当一个日历来使用了。

 

  16. 表格保存多选状态

 <Table
          :columns="columns"
          :data="activityList"
          @on-select-all-cancel="cancelAll"
          @on-select-all="selectAll"
          @on-select-cancel="selectItemCancel"
          @on-select="selectItem"></Table>


    selectItem (selection, row) {
      if (!this.ids.find(i => i === row.id)) {
        this.ids.push(row.id)
      }
    },
    selectItemCancel (selection, row) {
      const _index = this.ids.indexOf(row.id)
      if (_index != -1) {
        this.ids.splice(_index, 1)      }
    },
    selectAll () {
      this.activityList.map(i => {
        this.selectItem(null, i)
      })
    },
    cancelAll () {
      this.activityList.map(i => {
        this.selectItemCancel(null, i)
      })
    },

// 在获取列表数据的接口里使用一下这个方法
 sortData () {
      if (this.ids.length) { // 存放选择的id的数组
        this.activityList.forEach(ele => {
          if (this.actIds.includes(ele.id)) ele._checked = true
        })
      }
    }