avue switch開關列表開關調用接口

后端提供的接口是0和1，avue的開關按鈕是true和false，需要做處理，我這里點擊開關后值是反的，所以用了反向判斷，具體需要什么邏輯需要調試

效果圖如下：

 

 

HTML部分使用插槽（在avue-crud內使用插槽）

 

 在插槽上做判斷將返回的值轉為true和false，（如果后端提供的是true和false就不要處理后面的判斷）

<template slot="state"
                slot-scope="scope">
        <avue-switch :value="scope.row.state==1?true:false"
                     @click="rowState(scope.row)"></avue-switch>
      </template>

js部分

   rowState(row) {
      debugger
      var self = this
      var text = ''
      const state = row.state
      if (state == 1) {
        text = '停用'
      } else {
        text = '啟用'
      }

      this.$confirm('確定' + text + 'xxx嗎?', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const linkageState = state == 1 ? 0 : 1 //將true和false有改為0或者1傳給后端
          return updateLinkageState(row.id, linkageState)//改變狀態的接口
        })
        .then(() => {
          self.onLoad(self.page)
          self.$message({
            type: 'success',
            message: '操作成功!',
          })
        })
    },

獲取列表時一定要處理數據開啟行編輯，不然不會顯示開關按鈕

 onLoad(page, params = {}) {
      const self = this
      this.loading = true
      getPageList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        const data = res.data.data
        self.page.total = data.total
        self.data = data.records
        console.log(JSON.stringify(self.data))
        self.data.forEach((item) => {
          item.$cellEdit = true
        })

        self.loading = false
        self.selectionClear()
      })
    },

 

option內

 

 

 

  {
      label: '狀態',
      prop: 'state',
      type: 'switch', //類型
      slot: false,  //插槽
    
    },