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

element ui table（表格）實現(xiàn)點擊一行展開功能

 更新時間：2018年12月04日 10:27:14   作者：小蟲1  
這篇文章主要給大家介紹了關(guān)于element ui table（表格）實現(xiàn)點擊一行展開功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

element ui是一個非常不錯的vue的UI框架，element對table進(jìn)行了封裝，簡化了vue對表格的渲染。

element ui表格中有一個功能是展開行，在2.0版本官網(wǎng)例子中，只可以點擊右箭頭可以展開，我們的很多需求是點擊某一行展開

那是不是無法實現(xiàn)呢？其實，借助element ui的一些屬性，輕松實現(xiàn)點擊某行展開，我們還是用2.0.9版本官網(wǎng)的例子，

 

對齊改造，使之可以做到這點

<template>
 <el-table
   :data="tableData5"
   style="width: 100%"
   row-key="id"
   :expand-row-keys="expands"
   @row-click="rowClick">
  <el-table-column type="expand">
   <template slot-scope="props">
    <el-form label-position="left" inline class="demo-table-expand">
     <el-form-item label="商品名稱">
      <span>{{ props.row.name }}</span>
     </el-form-item>
     <el-form-item label="所屬店鋪">
      <span>{{ props.row.shop }}</span>
     </el-form-item>
     <el-form-item label="商品 ID">
      <span>{{ props.row.id }}</span>
     </el-form-item>
     <el-form-item label="店鋪 ID">
      <span>{{ props.row.shopId }}</span>
     </el-form-item>
     <el-form-item label="商品分類">
      <span>{{ props.row.category }}</span>
     </el-form-item>
     <el-form-item label="店鋪地址">
      <span>{{ props.row.address }}</span>
     </el-form-item>
     <el-form-item label="商品描述">
      <span>{{ props.row.desc }}</span>
     </el-form-item>
    </el-form>
   </template>
  </el-table-column>
  <el-table-column
    label="商品 ID"
    prop="id">
  </el-table-column>
  <el-table-column
    label="商品名稱"
    prop="name">
  </el-table-column>
  <el-table-column
    label="描述"
    prop="desc">
  </el-table-column>
 </el-table>
</template>
 
<style>
 .demo-table-expand {
  font-size: 0;
 }
 .demo-table-expand label {
  width: 90px;
  color: #99a9bf;
 }
 .demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
 }
</style>
 
<script>
 export default {
  data() {
   return {
    tableData5: [{
     id: '12987122',
     name: '好滋好味雞蛋仔',
     category: '江浙小吃、小吃零食',
     desc: '荷蘭優(yōu)質(zhì)淡奶，奶香濃而不膩',
     address: '上海市普陀區(qū)真北路',
     shop: '王小虎夫妻店',
     shopId: '10333'
    }, {
     id: '12987123',
     name: '好滋好味雞蛋仔',
     category: '江浙小吃、小吃零食',
     desc: '荷蘭優(yōu)質(zhì)淡奶，奶香濃而不膩',
     address: '上海市普陀區(qū)真北路',
     shop: '王小虎夫妻店',
     shopId: '10333'
    }, {
     id: '12987125',
     name: '好滋好味雞蛋仔',
     category: '江浙小吃、小吃零食',
     desc: '荷蘭優(yōu)質(zhì)淡奶，奶香濃而不膩',
     address: '上海市普陀區(qū)真北路',
     shop: '王小虎夫妻店',
     shopId: '10333'
    }, {
     id: '12987126',
     name: '好滋好味雞蛋仔',
     category: '江浙小吃、小吃零食',
     desc: '荷蘭優(yōu)質(zhì)淡奶，奶香濃而不膩',
     address: '上海市普陀區(qū)真北路',
     shop: '王小虎夫妻店',
     shopId: '10333'
    }],
 
 
    // 要展開的行，數(shù)值的元素是row的key值
    expands: []
   }
  },
  methods:{
   //在<table>里，我們已經(jīng)設(shè)置row的key值設(shè)置為每行數(shù)據(jù)id：row-key="id"
   rowClick(row, event, column) {
    Array.prototype.remove = function (val) {
     let index = this.indexOf(val);
     if (index > -1) {
      this.splice(index, 1);
     }
    };
 
    if (this.expands.indexOf(row.id) < 0) {
     this.expands.push(row.id);
    } else {
     this.expands.remove(row.id);
    }
 
   }
  }
 
 }
</script>

這個例子可以直接復(fù)制運行起來，一點問題都沒有，上面的代碼可以實現(xiàn)點擊某行展開，對比官網(wǎng)的例子，我們在table添加了

row-key="id"
:expand-row-keys="expands"
@row-click="rowClick"

這里有2個問題：

1.數(shù)據(jù)中每項沒有一個唯一標(biāo)示怎么辦？

2.實現(xiàn)展開當(dāng)前行的時候，其他行都能收起來

這2個問題也很簡單。第2個問題，在rowClick函數(shù)給expands添加之前，先清空這個數(shù)組。

if (this.expands.indexOf(row.id) < 0) {
     this.expands = []
     this.expands.push(row.id);
    } else {
     this.expands.remove(row.id);
    }

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

相關(guān)文章

  • 詳解van-cell如何使用插槽

    詳解van-cell如何使用插槽

    這篇文章主要為大家介紹了van-cell如何使用插槽詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-12-12
  • vuex + axios 做登錄驗證 并且保存登錄狀態(tài)的實例

    vuex + axios 做登錄驗證 并且保存登錄狀態(tài)的實例

    今天小編就為大家分享一篇vuex + axios 做登錄驗證 并且保存登錄狀態(tài)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • element的el-table中記錄滾動條位置的示例代碼

    element的el-table中記錄滾動條位置的示例代碼

    這篇文章主要介紹了element的el-table中記錄滾動條位置的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11
  • Vue2和Vue3中常用組件通信用法分享

    Vue2和Vue3中常用組件通信用法分享

    這篇文章主要為大家整理了Vue3的8種和Vue2的12種組件通信的使用方法，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Vue有一定的幫助，值得收藏
    2023-04-04
  • Vue基于Element-ui實現(xiàn)表格彈窗組件

    Vue基于Element-ui實現(xiàn)表格彈窗組件

    這篇文章主要為大家詳細(xì)介紹了Vue基于Element-ui實現(xiàn)表格彈窗組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-04-04
  • Vue超詳細(xì)講解重試機制示例

    Vue超詳細(xì)講解重試機制示例

    這篇文章主要介紹了Vue重試機制示例，重試指的是當(dāng)加載出錯時，有能力重新發(fā)起加載組件的請求。異步組件加載失敗后的重試機制，與請求服務(wù)端接口失敗后的重試機制一樣
    2023-01-01
  • vue?router權(quán)限管理實現(xiàn)不同角色顯示不同路由

    vue?router權(quán)限管理實現(xiàn)不同角色顯示不同路由

    本文主要介紹了vue?router權(quán)限管理實現(xiàn)不同角色顯示不同路由，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-03-03
  • 使用Element時默認(rèn)勾選表格toggleRowSelection方式

    使用Element時默認(rèn)勾選表格toggleRowSelection方式

    這篇文章主要介紹了使用Element時默認(rèn)勾選表格toggleRowSelection方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-10-10
  • vue實現(xiàn)二維碼掃碼功能(帶樣式)

    vue實現(xiàn)二維碼掃碼功能(帶樣式)

    最近接了一個移動端的項目，實現(xiàn)微信掃碼功能，今天小編利用這個平臺給大家分享vue實現(xiàn)二維碼掃描功能的實現(xiàn)代碼，需要的朋友參考下吧
    2021-08-08
  • vue項目中使用AvueJs的詳細(xì)教程

    vue項目中使用AvueJs的詳細(xì)教程

    Avue.js是基于現(xiàn)有的element-ui庫進(jìn)行的二次封裝，簡化一些繁瑣的操作，核心理念為數(shù)據(jù)驅(qū)動視圖,主要的組件庫針對table表格和form表單場景，這篇文章給大家介紹了vue項目中使用AvueJs的相關(guān)知識，感興趣的朋友跟隨小編一起看看吧
    2022-10-10

最新評論