<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        iview table render集成switch開關的實例

        來源:懂視網 責編:小采 時間:2020-11-27 22:17:38
        文檔

        iview table render集成switch開關的實例

        iview table render集成switch開關的實例:今天想要分享的是iview table render集成switch開關修改table表格的值,看文檔記得看2.0的,不注意打開就成1.0然后用上了一直沒有效果又沒有找出原因。給出的只是一種寫法思路,具體自己集成。 一、效果如下 即是打開處理switch開關,對應修改為已處理
        推薦度:
        導讀iview table render集成switch開關的實例:今天想要分享的是iview table render集成switch開關修改table表格的值,看文檔記得看2.0的,不注意打開就成1.0然后用上了一直沒有效果又沒有找出原因。給出的只是一種寫法思路,具體自己集成。 一、效果如下 即是打開處理switch開關,對應修改為已處理

        今天想要分享的是iview table render集成switch開關修改table表格的值,看文檔記得看2.0的,不注意打開就成1.0然后用上了一直沒有效果又沒有找出原因。給出的只是一種寫法思路,具體自己集成。

        一、效果如下

        即是打開處理switch開關,對應修改為已處理狀態,關閉switch開關,修改為未處理狀態。

        二、template html寫法

        <span style="font-size:14px;"><Table highlight-row border :columns="columns1" :data="data1" ref="table" :height="tableHeight"></Table></span> 

        三、data寫法,table render函數寫法,

        columns1: [{
         fixed: 'right',
         title: 'Action',
         key: 'action',
         width: 250,
         align: 'center',
         render:(h, params) => {
         return h('div', [
         h('Button', {
         props: {
         type: 'primary',
         size: 'small'
         },
         style: {
         marginRight: '20px'
         },
         on: {
         click: () => {
         this.show(params.index)
         }
         }
         }, '閱覽'),
         h('strong', {
         style: {
         marginRight: '5px'
         },
         }, '處理'),
         h('i-switch', { //數據庫1是已處理,0是未處理
         props: {
         type: 'primary',
         value: params.row.treatment === 1 //控制開關的打開或關閉狀態,官網文檔屬性是value
         },
         style: {
         marginRight: '5px'
         },
         on: {
         'on-change': (value) => {//觸發事件是on-change,用雙引號括起來,
         //參數value是回調值,并沒有使用到
         this.switch(params.index) //params.index是拿到table的行序列,可以取到對應的表格值
         }
         }
         }, )
         ]);
         }
        }]

        四、methods方法

        //通過開關狀態判斷值然后傳值進行更新
         switch(index) {
         //打開是true,已經處理1
         if (this.data1[index].treatment == 1) {
         this.data1[index].treatment = 0
         this.updateFeedbackMessage(this.data1[index].id, 'treatment', this.data1[index].treatment)
         } else {
         this.updateFeedbackMessage(this.data1[index].id, 'treatment', 1)
         }
         },
         //更新反饋信息某一字段
         updateFeedbackMessage(id, key, value) {
         var vm = this
         var data = {
         id: id
         }
         data[key] = value
         vm.$http.put('/v1/suggestion', data).then(function (response) {
         if (response.data.code == '000000') {
         vm.$Message.info('更新成功');
         vm.getFeedbackMessages()//獲取table數據信息,這里調用是因為修改值之后馬上可以更新table值
         }
         }).catch((error) => {
         console.log(error)
         })
         },
         //獲取所有反饋信息列表
         getFeedbackMessages() {
         var vm = this
         var url = '/v1/suggestions?'
         url = url + "pageNum=" + this.pageNum + '&pageSize=' + this.pageSize
         if (this.createByValue != '') {
         url = url + '&createBy=' + this.createByValue
         }
         if (this.dealModelValue != '') {
         url = url + '&treatment=' + this.dealModelValue
         }
         this.$http.get(url).then(response => {
         if (response.data.code == '000000') {
         vm.data1 = response.data.data
         vm.pageTotal = parseInt(response.data.message)
         }
         }).catch(error => {
         console.log(error)
         })
         },

        注重思路,有問題一起交流

        以上這篇iview table render集成switch開關的實例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        iview table render集成switch開關的實例

        iview table render集成switch開關的實例:今天想要分享的是iview table render集成switch開關修改table表格的值,看文檔記得看2.0的,不注意打開就成1.0然后用上了一直沒有效果又沒有找出原因。給出的只是一種寫法思路,具體自己集成。 一、效果如下 即是打開處理switch開關,對應修改為已處理
        推薦度:
        標簽: switch 開關 集成
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 国产亚洲精品久久久久秋霞| 日韩国产免费一区二区三区| 亚洲A∨午夜成人片精品网站| 国产成人精品日本亚洲专| 2020因为爱你带字幕免费观看全集| 亚洲av午夜成人片精品网站| 中文字幕乱码一区二区免费| 国产亚洲人成无码网在线观看| 国产在线精品一区免费香蕉| 亚洲成A人片777777| 色欲色香天天天综合网站免费 | 精品97国产免费人成视频| 亚洲一区日韩高清中文字幕亚洲| 黄色一级毛片免费看| 国产成人亚洲精品狼色在线| 免费视频成人手机在线观看网址| 亚洲男人第一av网站| 在线观看免费人成视频色9| 亚洲精品无码成人| 亚洲欧洲日本在线| 成人国产精品免费视频| 亚洲AV区无码字幕中文色| 国产91免费视频| AV激情亚洲男人的天堂国语| 亚洲日韩国产一区二区三区| 免费A级毛片无码视频| 亚洲情A成黄在线观看动漫软件| 免费a级毛片18以上观看精品| a级黄色毛片免费播放视频| 亚洲成色WWW久久网站| 日韩免费无码视频一区二区三区| 亚洲国产美女视频| 亚洲一区二区三区无码影院| 久久久久久AV无码免费网站 | 在线精品自拍亚洲第一区| 亚洲精品制服丝袜四区| 毛片在线免费视频| 免费人成黄页在线观看日本| 亚洲综合一区国产精品| 亚洲精品亚洲人成在线观看| 在线免费观看中文字幕|