vue +ant 常用知识点总结1

刷新页面

修改app.vue,利用v-if可以刷新页面的属性,同时使用provide和inject将祖先节点的数据传递给子代节点

<template>
  <div id="app">
    <router-view v-if="isShow"></router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isShow: true
    }
  },
  methods: {
    reload () {
      this.isShow= false
      this.$nextTick(function () {
        this.isShow= true
      })
    }
  }
}
</script>

在要刷新的子路由页面引入inject,然后执行reload事件即可刷新页面
export default {
  name: "demo",
  inject:['reload'],
  data() {
    return {
      
    }
  },
  methods: {
    reflesh(){
      this.reload()
    },
  }
}
 

强制刷新: this.$forceUpdate()  （尽量不要用）

前端删除

this.attachList.splice(index, 1)

vue +ant desigin table  表格加loading

table里   :loading="loading" 
data 里     loading:false
哪里需要写哪里 
this.loading=false   //开始
this.loading=false    //结束

 处理掉 form 表单中不想要的字段用ES6

const {metaTitle,metaIcon,...form} = this.form

ant table 表单数据处理

//情况一 
<template slot="type" slot-scope="text, record">
          <div>{{ switchStatus(record.type).name }}</div>
        </template>
       
      switchStatus(type) {
      if (type == null) return { name: '' }
      if (type == 1) return { name: '发票' }
      if (type == 2) return { name: '付款凭证' }
      if (type == 3) return { name: '审批单' }
    }

//情况二
   {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    customRender: (text, record, index) => index + 1,
  },

{
    title: "计划付款时间",
    dataIndex: "actDate",
    key: "actDate",
    ellipsis: true,
    customRender: (text) =>text?text.substring(0, 10):'', //截取长度

  },
 

ant 弹窗按钮 显示隐藏

//隐藏
:okButtonProps="{ style: { display: 'none' } }"
:cancelButtonProps="{ style: { display: 'none' } }"
//条件判断
是否显示 :okButtonProps="{ style: { display: mode == 'view'?'none':'' } }"

 ant 弹窗按钮 加loading 避免重复提交   :confirmLoading="btnloading"

全选反选取消选择问题

//全选
    onSelectAll() {
      // 将数据key值取出，用于计算属性
      this.selectedRowKeys = this.data.map((item) => item.key);
    },
    //反选
    selectReverse() {
      // 取出全部key进行保存
      const allDataKeys = this.data.map((item) => item.key);
      // 已选中的key
      const selectedDataKeys = this.selectedRowKeys;
      // 对已选中进行过滤，实现反选
      this.selectedRowKeys = allDataKeys.filter(
        (item) => !selectedDataKeys.includes(item)
      );   //filter()根据返回值是true还是false决定保留还是丢弃
    },
    //取消选项
    onSelect() {
      // 清空选中数组
      this.selectedRowKeys = [];
    },

方法2

 <a-button class="button" @click="checkHT('all')">
            <span>全选</span>
          </a-button>
          <a-button class="button" @click="checkHT('other')">
            <span>反选</span>
          </a-button>
          <a-button class="button" @click="checkHT('allnot')">
            <span>取消全选</span>
 checkHT(type) {
      if (type === 'all') {
        this.checkedKeys = this.documentTreeData.map((item) => {
          return item.key
        })
      } else if (type === 'other') {
        let newarr = []
        this.documentTreeData.forEach((val) => {
          if (!this.checkedKeys.includes(val.key)) {
            newarr.push(val.key)
          }
        })
        this.checkedKeys = newarr
      } else if (type === 'allnot') {
        this.checkedKeys = []
      }
    },

 ant  保存校验

  async handleSubmit() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          if (this.form.bTime >= this.form.eTime) {
            this.$message.info('休假开始时间应小于休假结束时间')
            return
          }

          var postData = this.form
          postData.name = this.userList.find(item => {
            if (item.value == this.form.fuserId) return item
          }).label

          let data = await editHolidayInfo({
            postData: postData,
            fid: this.form.fid,
            fjList: this.fjList
            // deptName:userInfo.dname
          })
          if (data.code != 200) {
            this.$message.info(data.message)
          } else {
            this.$message.info('编辑成功')
            this.close()
            this.$emit('success', true)
          }
        } else {
         //console.log('error submit!!')
          return false
        }
      })
    }

新增编辑共用同一页面name切换

:title="receive.type == 'detail'?
   '查看进度数据':(receive.type == 'add'?'新增进度管理':'编辑进度管理')"