<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
        主站蜘蛛池模板: 亚洲乱码无人区卡1卡2卡3| 亚洲成a人片77777老司机| 涩涩色中文综合亚洲| 97免费人妻无码视频| 亚洲伊人久久大香线蕉啊| 黄+色+性+人免费| 亚洲乱人伦精品图片| 无码人妻一区二区三区免费手机 | 99久久综合国产精品免费| 亚洲永久中文字幕在线| 97国产免费全部免费观看| 456亚洲人成影院在线观| 日本高清免费网站| 亚洲黄片手机免费观看| 亚洲AV无码精品色午夜在线观看| 伊人久久免费视频| 亚洲日本国产精华液| 高清国语自产拍免费视频国产 | 成年人免费观看视频网站| 亚洲欧美日韩中文字幕在线一区| 永久免费看bbb| www在线观看免费视频| 久久精品夜色国产亚洲av| 亚洲人成在线免费观看| 亚洲最大AV网站在线观看| 国产激情免费视频在线观看| 久久精品亚洲男人的天堂| 亚洲免费精彩视频在线观看| 亚洲人成色在线观看| 337p日本欧洲亚洲大胆裸体艺术| 69av免费观看| 国产亚洲精品欧洲在线观看| 日本亚洲视频在线| 日本免费一区二区三区最新vr| xxxx日本在线播放免费不卡| 亚洲视频国产精品| 国产猛烈高潮尖叫视频免费| 久久爰www免费人成| 国产综合激情在线亚洲第一页 | 成人国产mv免费视频| 中文字幕在线免费看线人|