技術標籤：知識點antvuevue.jses6

重新整理頁面

修改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'?'新增進度管理':'編輯進度管理')"