欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于element-ui表格的二次封裝實現(xiàn)

 更新時間:2022年07月14日 15:01:51   作者:Kepler明  
本文主要介紹了基于element-ui表格的二次封裝實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

在項目中經(jīng)常會使用到element的表格,如果每次都cv,也確實有點麻煩,基于這個情況我對表格進行了二次封裝

寫一個Table組件

首先先寫表格樣式

    <el-table
      :data="tableData"
      :header-cell-style="headerStyle"
      :height="height"
      :border="border"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if='selection'
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        v-for="v in tableProp"
        :key="v.label"
        :prop="v.code"
        :sortable='v.sortable'
        :label="v.label"
        :width="v.width"
      >
        <template slot-scope="scope">
          <div v-if='!v.code'>
            {{ scope.row[scope.column.property] }}
          </div>
          <div v-else>
              <slot name="row" :row="scope.row"></slot>
          </div>
        </template>
        <el-table-column
          v-for="(item, i) in v.data"
          :key="i"
          :sortable='item.sortable'
          align="center"
          :width="item.width"
          :prop="item.code"
          :label="item.label"
        >
          <template slot-scope="scope">
              <div v-if='!v.code'>
                {{ scope.row[scope.column.property] }}
              </div>
              <div v-else>
                  <slot name="row" :row="scope.row"></slot>
              </div>
          </template>
        </el-table-column>
      </el-table-column>
       <el-table-column label="操作" v-if='ishandle'>
        <template slot-scope="scope">
          <slot name="edit" :row="scope.row" :index="scope.$index"></slot>
        </template>
      </el-table-column>
    </el-table>

tableData為當前顯示的數(shù)據(jù),tableProp為表頭的名稱,可以為多級也可以為單級,區(qū)別為data是否存在,headerStyle為表頭樣式,height為表的高度,sortable以該列為基準的排序,border是否顯示邊框,handleSelectionChange多選,selection是否顯示多選,ishandle是否顯示操作,這里使用插槽進行寫操作

export default {
  props: {
    height: {
      type: Number,
      default: 220,
    },
    ishandle:{
      type: Boolean,
      default: false,
    },
    border:{
      type: Boolean,
      default: false,
    },
    tableProp: {
      type: Array,
      default: () => [
        {
          code: 'index',
          label: '指標',
          width: 100,
        },
        {
          code: 'PAC',
          label: 'PAC',
          width: 120,
          data:{
            code: 'PAB',
            label: 'PAB',
            width: 60,    
          }
        },
        {
          code: 'PAM',
          label: 'PAM',
          width: 60,
          code:true,
        },
        {
          code: 'POWER_CONSUMPTION',
          label: '綜合電耗(kW·h)',
          width: 50,
        },
        {
          code: 'WATER_CONSUMPTION',
          label: '自用水率(%)',
        },
      ],
    },
    tableData: {
      type: Array,
      default:() => [
        {
          index:1,
          PAC:'1'
          PAM:'1',
          POWER_CONSUMPTION:'1',
          WATER_CONSUMPTION:'1'
        }
      ]
    },
    Style:{
      type:String,
      default:'font-size: 12px;padding:0;line-height: inherit;font-weight: 500;color: #6A7474;'
    }
  },
  data() {
    return {
      show: false,
    };
  },
  methods: {
  // 樣式
    headerStyle() {
      return this.Style;
    },
    // 多選
    handleSelectionChange(val){
      this.$emit('SelectionChange',val)
    }
  },
};

第二步加分頁

<el-pagination
      :background='background'
      :layout="layout"
      :total="total"
      :page-size="pageSize"
      :current-page.sync="current"
      :page-sizes="pageSizes"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :hide-on-single-page='singlepage'
      >
    </el-pagination>

background背景是否顯示,layout組件布局,子組件名用逗號分隔,total總條數(shù),pageSizes每頁顯示個數(shù)選擇器的選項設置,current當前頁碼,pageSize每頁顯示條目個數(shù),singlepage只有一頁時是否隱藏,handleSizeChangepageSize 改變時會觸發(fā),handleCurrentChange改變時會觸發(fā)

export default {
  props: {
    background: {
      type: Boolean,
      default: false,
    },
    layout:{
      type: String,
      default: 'total, sizes, prev, pager, next, jumper',
    },
    total:{
      type: Number,
      default: 100,
    },
    pageSize:{
      type: Number,
      default: 10,
    },
    pageSizes:{
      type: Array,
      default: () => [10, 20, 30, 40, 50, 100],
    },
    singlepage: {
      type: Boolean,
      default: false,
    },
    current:{
      type: Number,
      default: 1,
    },
  },
  methods: {
    // pageSize 改變時會觸發(fā)
    handleSizeChangepageSize (val) {
      this.$emit('handleSizeChangepageSize ',val)
    },
    // currentPage 改變時會觸發(fā)
    handleCurrentChange(val){
      this.$emit('handleCurrentChange',val)
    }
  },
};

在頁面中使用

先引入Table.vue頁面

        <Table
          :height="90"
          class="left-top-table"
          :tableData="tableIndex"
          :tableProp="tableProp"
          @handleCurrentChange='handleCurrentChange'
          @handleSizeChangepageSize ='handleSizeChangepageSize '
        >
          <template slot="edit" slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.index, scope.row)"
              >編輯</el-button
            >
          </template>
        </Table>
//pageSize 改變時會觸發(fā)
handleCurrentChange(val){
....
}
// currentPage 改變時會觸發(fā)
handleSizeChangepageSize (val){
....
}
// 編輯方法
handleEdit(index,row){
....
}

更多的可以根據(jù)自己項目的需求進行修改,這只是一個大概的項目雛形

到此這篇關(guān)于基于element-ui表格的二次封裝實現(xiàn)的文章就介紹到這了,更多相關(guān)element表格二次封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue Computed中g(shù)et和set的用法及Computed與watch的區(qū)別

    Vue Computed中g(shù)et和set的用法及Computed與watch的區(qū)別

    這篇文章主要介紹了Vue Computed中g(shù)et和set的用法及Computed與watch的區(qū)別,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • vue穿梭框?qū)崿F(xiàn)上下移動

    vue穿梭框?qū)崿F(xiàn)上下移動

    這篇文章主要為大家詳細介紹了vue穿梭框?qū)崿F(xiàn)上下移動,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-01-01
  • Nuxt3+ElementPlus構(gòu)建打包部署全過程

    Nuxt3+ElementPlus構(gòu)建打包部署全過程

    網(wǎng)上大部分關(guān)于Nuxt打包部署教程可謂是可以用五花八門來形容,這對于第一次接觸的朋友簡直是無從下手,這篇文章主要給大家介紹了關(guān)于Nuxt3+ElementPlus構(gòu)建打包部署的相關(guān)資料,需要的朋友可以參考下
    2023-01-01
  • vue-cli3項目展示本地Markdown文件的方法

    vue-cli3項目展示本地Markdown文件的方法

    這篇文章主要介紹了vue-cli3項目展示本地Markdown文件的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-06-06
  • vue中進行微博分享的實例講解

    vue中進行微博分享的實例講解

    在本篇文章里小編給大家整理的是一篇關(guān)于vue中進行微博分享的實例內(nèi)容,有需要的朋友們可以參考下。
    2019-10-10
  • vue?innerHTML?綁定單擊事件不生效的解決

    vue?innerHTML?綁定單擊事件不生效的解決

    這篇文章主要介紹了vue?innerHTML?綁定單擊事件不生效的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • 詳解如何添加babel?polyfill

    詳解如何添加babel?polyfill

    這篇文章主要介紹了詳解vue如何添加babel?polyfill實現(xiàn)方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-06-06
  • Vuex之Action的使用方法詳解

    Vuex之Action的使用方法詳解

    這篇文章主要介紹了Vuex之Action的使用方法詳解,Action 類似于 mutation ,不同在于Action 提交的是 mutation,而不是直接變更狀態(tài),
    Action 可以包含任意異步操作,需要的朋友可以參考下
    2023-11-11
  • vue+element的表格實現(xiàn)批量刪除功能示例代碼

    vue+element的表格實現(xiàn)批量刪除功能示例代碼

    這篇文章主要介紹了vue+element的表格實現(xiàn)批量刪除功能示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • vue如何實現(xiàn)在線編輯excel

    vue如何實現(xiàn)在線編輯excel

    這篇文章主要介紹了vue如何實現(xiàn)在線編輯excel問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10

最新評論