亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Iview Table組件中各種組件擴(kuò)展的使用

 更新時(shí)間:2018年10月20日 15:12:18   作者:崔小真  
這篇文章主要介紹了Iview Table組件中各種組件擴(kuò)展的使用,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

一、Iview Table 組件 多選框選中和禁選設(shè)置

Table添加多選框

通過給 columns 數(shù)據(jù)設(shè)置一項(xiàng),指定  type: 'selection' ,即可自動(dòng)開啟多選功能。

正確使用好以下事件,可以達(dá)到需要的效果:

  • @on-select ,選中某一項(xiàng)觸發(fā),返回值為  selection  和  row ,分別為已選項(xiàng)和剛選擇的項(xiàng)。
  • @on-select-all ,點(diǎn)擊全選時(shí)觸發(fā),返回值為  selection ,已選項(xiàng)。
  • @on-selection-change ,只要選中項(xiàng)發(fā)生變化時(shí)就會(huì)觸發(fā),返回值為  selection ,已選項(xiàng)。
<template>
 <div>
  <Table ref="selection" :columns="columns" :data="data" @on-selection-change="selectChange"></Table>
 </div>
</template>

<script>
  export default {
      data () {
        return {
          columns: [ { type: 'selection', width: 60, align: 'center' }, { title: 'Name', key: 'name' }]
        }
      },
      methods: {
        selectChange: function (data) {
          console.log(data[i].name)
        }
      }

</script>

給 data 項(xiàng)設(shè)置特殊 key _checked: true 可以默認(rèn)選中當(dāng)前項(xiàng)。

給 data 項(xiàng)設(shè)置特殊 key _disabled: true 可以禁止選擇當(dāng)前項(xiàng)。

例如:

for (var i = 0; i < res.data.list.length; i++) {
 if (res.data.list[i].status === '1') {
  res.data.list[i]._disabled = true // 設(shè)置復(fù)選框禁用
  res.data.list[i]._checked= true // 設(shè)置復(fù)選框選中狀態(tài)
 }
}

二、Iview Table 組件中點(diǎn)擊Icon彈出Poptip的寫法

1.圖標(biāo)禁用方式

{
 title: '撤銷',
 key: 'operate',
 width: 70,
 fixed: 'right',
 render: (h, params) => {
  if (params.row.status === '1') { // 選中當(dāng)前行信息
   return h('div', [
    h('div', [
     h('Poptip', {
      props: {
       confirm: true,
       title: '確定要撤銷嗎!'
      },
      on: {
       'on-ok': () => {
        this.cancelFunction(params.index)
       }
      }
     }, [
      h('Button', {
       props: {
        shape: 'circle',
        icon: 'md-return-left'
       }
      })
     ])
    ])
   ])
  } else {
   return h('div', [
    h('Button', {
     props: {
      shape: 'circle',
      icon: 'md-return-left',
      disabled: true // 禁用圖標(biāo)
     }
    })
   ])
  }
 }
},

2.圖標(biāo)禁用方式

{
 title: '修改',
 key: 'operate',
 fixed: 'right',
 width: 70,
 textAlign: 'right',
 render: (h, params) => {
  return h('div', [
   h('Button', {
    props: {
     shape: 'circle',
     icon: 'ios-paper-plane',
     disabled: params.row.status !== '0'
    },
    on: {
     click: () => {
      this.editFunction(params.index)
     }
    }
   })
  ])
 }
},

三、四元運(yùn)算符 : 多個(gè)三元運(yùn)算符 嵌套

var state = null;

var display_state = (state == null ? "未用" : (state == true ? "在用" : "停用"))

//display_state
//"未用"

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 使用el-upload組件實(shí)現(xiàn)遞歸多文件上傳的全過程

    使用el-upload組件實(shí)現(xiàn)遞歸多文件上傳的全過程

    el-upload組件文件上傳都是每個(gè)文件請(qǐng)求一次接口,本次實(shí)現(xiàn)一次請(qǐng)求上傳多個(gè)文件,下面這篇文章主要給大家介紹了關(guān)于使用el-upload組件實(shí)現(xiàn)遞歸多文件上傳的相關(guān)資料,需要的朋友可以參考下
    2023-03-03
  • element動(dòng)態(tài)路由面包屑的實(shí)現(xiàn)示例

    element動(dòng)態(tài)路由面包屑的實(shí)現(xiàn)示例

    本文主要介紹了element動(dòng)態(tài)路由面包屑的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • 開發(fā)一個(gè)Parcel-vue腳手架工具(詳細(xì)步驟)

    開發(fā)一個(gè)Parcel-vue腳手架工具(詳細(xì)步驟)

    這篇文章主要介紹了開發(fā)一個(gè)Parcel-vue腳手架工具(詳細(xì)步驟),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-09-09
  • vue實(shí)現(xiàn)圖片滑動(dòng)驗(yàn)證功能

    vue實(shí)現(xiàn)圖片滑動(dòng)驗(yàn)證功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片滑動(dòng)驗(yàn)證功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-09-09
  • vue+echarts實(shí)現(xiàn)數(shù)據(jù)實(shí)時(shí)更新

    vue+echarts實(shí)現(xiàn)數(shù)據(jù)實(shí)時(shí)更新

    這篇文章主要為大家詳細(xì)介紹了vue+echarts實(shí)現(xiàn)數(shù)據(jù)實(shí)時(shí)更新,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue如何監(jiān)聽el-select選擇值的變化

    vue如何監(jiān)聽el-select選擇值的變化

    這篇文章主要介紹了vue如何監(jiān)聽el-select選擇值的變化,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue3中使用vuedraggable拖拽實(shí)戰(zhàn)教程

    Vue3中使用vuedraggable拖拽實(shí)戰(zhàn)教程

    這篇文章主要介紹了Vue3中使用vuedraggable拖拽實(shí)戰(zhàn)教程,文中通過示例介紹了vue3拖拽組件vuedraggable的使用demo,需要的朋友可以參考下
    2023-06-06
  • vue實(shí)現(xiàn)文字加密功能

    vue實(shí)現(xiàn)文字加密功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文字加密功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-09-09
  • Element-ui upload上傳文件限制的解決方法

    Element-ui upload上傳文件限制的解決方法

    這篇文章主要介紹了Element-ui upload上傳文件限制的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-01-01
  • vue3動(dòng)態(tài)修改打包后的請(qǐng)求路徑的操作代碼

    vue3動(dòng)態(tài)修改打包后的請(qǐng)求路徑的操作代碼

    這篇文章主要介紹了vue3動(dòng)態(tài)修改打包后的請(qǐng)求路徑,需要我們創(chuàng)建一個(gè)靜態(tài)資源里的外部文件來實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2022-09-09

最新評(píng)論