用vue+element-ui開發后台筆記

1、前端通過 formData: new FormData(), 構造對象傳數值給后台！

當傳給后台的參數中有圖片的時候，需要把需要傳輸的數據通過構造對象new FormData()的形式存數據，並且在傳給后端的數據格式中要進行transfromRequest進行轉化，從而模仿表單from提交

 

 

2、在vue中使用wnidow.location.href進行頁面跳轉時，跳轉鏈接需要加協議http://不然跳轉不過去！！！！

3、在使用axios進行ajax請求時，如果傳輸的數據中含有圖片上傳，這時候需要通過new formData封裝傳輸，

4、表格中直接用prop獲取數據，如果是點擊是獲取當前行的數據，那么使用template的scope屬性！！！

 

 5、嵌套路由tabs選卡切換

效果如下

router設置

App\ManageV2\html\src\views\activity\channel\activityChannelList.vue

 watch: {
    '$route'(to, from) {
      // 對路由變化作出響應...
      if (to.name === 'ActivityChannelList') {
        this.$router.push({
          name: 'ApplianceChannel'
        })
      }
      this.activeName = to.name
    }
  },
  created() {
    console.log(this.$route)
    if (this.$route.name === 'ActivityChannelList') {
      this.$router.push({
        name: 'ApplianceChannel',
        query: this.$route.query
      })
      this.activeName = 'ApplianceChannel'
    } else {
      this.activeName = this.$route.name
    }
  },
  methods: {
    handleTabClick(tabs) {
      this.$router.push({
        name: tabs.name,
        query: this.$route.query
      })
    },
    beforeLeave(activeName, oldActiveName) {
    }
  }

 6、表格自定義序號（0,1,2......）

view層代碼如下

<el-table-column :index="indexMethod"
                         label="序號"
                         align="center"
                         type="index"
                         width="80" />

method代碼如下

    indexMethod(index) {
      return index + 10 * (this.listQuery.page - 1)
    }

7、搜索功能實現（渠道統計）

搜索輸入的關鍵字字段名都統一放在data里面的listQuery對象里面

listQuery: {
        sub_key: '',
        sub_name: '',
        page: 1,
        page_size: 10
      },

然后對listQuery變量進行監聽計算

computed: {
    queryEmpty() {
      return this.listQuery.sub_key === '' &&
        this.listQuery.sub_name === ''
    }
  },
  watch: {
    'queryEmpty'(newVal) {
      if (newVal) {
        this.$message.info('搜索條件清空，展示全部數據')
        console.log('條件清空，渲染原始列表')
        this.fetchData()
      }
    },
    'list'(newVal) {
      newVal.length === 0 ? this.listQuery.page = 1 : true
    }

  },

method里面進行搜索時間執行

// 搜索按鈕
    _search() {
      if (!this.queryEmpty) {
        this.listQuery.page = 1
        this.fetchData()
      } else {
        this.$message.info('搜索條件不能為空')
      }
    }

注意：監聽search里面的屬性，如果改屬性是通過組件的形式傳過來值，那么該屬性在定義search對象的時候，要一起定義，設置！！！不然computed、watch屬性監聽不到這個屬性！！！

 、