<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级毛片无码免费真人| 国产精品爱啪在线线免费观看| 毛片免费观看视频| 亚洲精品美女在线观看| 国产成人久久AV免费| 亚洲精品卡2卡3卡4卡5卡区| 久久久精品国产亚洲成人满18免费网站| 国产免费啪嗒啪嗒视频看看| 理论亚洲区美一区二区三区| 亚洲AV成人精品日韩一区18p| 黄页视频在线观看免费| 免费乱理伦在线播放| 黄色片网站在线免费观看| 亚洲国产精品尤物yw在线| 九九全国免费视频| 亚洲国产精品SSS在线观看AV| 精品亚洲永久免费精品| 亚洲视频在线观看地址| 免费H网站在线观看的| 亚洲日韩在线中文字幕综合| 亚洲福利视频一区二区| 野花香高清视频在线观看免费 | 无人在线直播免费观看| 国产成人精品日本亚洲网址| 成年18网站免费视频网站| 黄色a级免费网站| 亚洲av永久无码精品漫画| 真人做A免费观看| 国产亚洲午夜精品| 久久精品国产亚洲av成人| 免费观看激色视频网站bd| 中国china体内裑精亚洲日本| 亚洲成AⅤ人影院在线观看| 免费人成黄页在线观看日本| 亚洲乱码一二三四区麻豆| 亚洲XX00视频| 亚洲香蕉免费有线视频| 婷婷亚洲综合五月天小说在线| 亚洲国产精品一区二区久久hs| 国产免费丝袜调教视频| 一级全免费视频播放|