Table展開行

在element-ui的官網例子中，有展開行的功能，但是只能點擊某行的箭頭位置，才可以展開當行的內容。這不能滿足業務需求，我們老大需要點擊該行的任何一個位置都能展開這行內容顯示。上網找了好多例子，都能解決我的問題。還是要回到element-ui的開發文檔。在Table 表格開發文檔中發現，

Table Attributes有兩個屬性：row-key和expand-row-keys

注意的是：row-key傳入的是一個function（row），所以是：row-key="getRowKeys"，在methods中要初始化該方法。

而expand-row-keys傳入的是一個數組，數組的值就是展開row的key。所以是 :expand-row-keys="expands"

 

Table Events中有一個row-click點擊行的事件

 這里要注意的是：row-click的使用方法。正確格式：@row-click='rowClik',而不是@row-click='rowClik()'。這是要注意的地方

<template>
  <el-table :data="tableData5" :row-key="getRowKeys"
        :expand-row-keys="expands" @row-click="rowClik" style="width: 100%">
    <el-table-column type="expand">
      <template 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>
      </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>
<script>
export default{
 data() {
      return {
        tableData5: [{
          id: '12987122',
          name: '好滋好味雞蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷蘭優質淡奶，奶香濃而不膩',
          address: '上海市普陀區真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987123',
          name: '好滋好味雞蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷蘭優質淡奶，奶香濃而不膩',
          address: '上海市普陀區真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987125',
          name: '好滋好味雞蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷蘭優質淡奶，奶香濃而不膩',
          address: '上海市普陀區真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }],
          // 要展開的行，數值的元素是row的key值
         expands: []
      }
    },
    methods:{
     //獲取row的key值
    getRowKeys(row) {
                return row.id;
            },
//點擊行，觸發的函數，該函數的參數值不止row，還有 event, column
    rowClik(row){
        if(row.id===this.expands[0]){//點擊另一行的時候，把expands清空。即可把上一行給關閉，展開當前點擊行
          this.expands=[];
        }
        else{
          this.expands=[];
          this.expands.push(row.id);
        }
      },
    },
     
}
</script>

在這里還犯了一個小小的錯誤，我們看到開發文檔中，關於table的有這幾項：Table Attributes 、Table Events 、Table Methods  。但是，不是很清楚他們怎么調用。所以在這里總結一下。

1、Table Attributes

在上面的例子中， :data="tableData5" :row-key="getRowKeys" :expand-row-keys="expands" 這三項都是Table Attributes的屬性，當要給屬性賦值的時候，前面都要加“：”，

:是v-bind的縮寫，是為了動態綁定數據。上了冒號是為了動態綁定數據，等號后面可以寫變量。如果不使用冒號，等號后面就可以寫字符串等原始類型數據。這時就無法進行動態綁定數據了。

2、Table Events

在上面的例子中， @row-click="rowClik"就是table event的事件啦。@相當於v-on：，而這里還有一個問題。v-on:row-click="rowClik"和v-on:row-click="rowClik()"的區別是什么？

看到有人是這樣說的：v-on:row-click="rowClik()"在vue中是叫內聯處理器方法，綁定的是一個js表達式，樓主綁定了rowClik()表達式，並且沒有傳入任何參數，因此在row-click事件發生時就執行這個表達式，在rowClik方法中執行時不會傳入任何參數。這和綁定事件處理器是有區別的。https://cn.vuejs.org/v2/guide...內聯處理器方法。

我也不是很理解，看文檔也不是很懂。這還是要繼續遇到坑，才能明白。

3、Table Methods

方法和事件，這兩個概念也不是很懂。還是要繼續爬坑，我不是一個合格的程序員。。。。。。。。。