Element table使用技巧詳解

1、控制table某些行數不顯示

　　下載附件的需求，有些行有附件，有些沒有，所以需要過濾，重點是：Array.filter()使用

<el-card :body-style="{ padding: '20px 10px' }">
    <h5>附件列表</h5>
    <el-table :data="quesObj.filter(item => item.attach)">
        <el-table-column label="附件名稱" align="center">
            <template slot-scope="scope">
                <a :download="scope.row.attach" :href="'/api/hbase/readFile?fileName=' + scope.row.attach">{{scope.row.attach}}</a>
            </template>
        </el-table-column>
    </el-table>
</el-card>

2、elementUI的table自定義合計方法

//1、table上添加summary-method自定義計算方法
<el-table class="orderStyle" :show-summary = "userInfo && userInfo.roleName === 'user'" :summary-method="totalRule"
    ref="order" :data="orderData" @selection-change="handleSelectionChange">

//2、選擇的行數據
handleSelectionChange(rows){ this.orders = rows }, //3、合計規則：注意return的是與列對應的數組
totalRule(){ let sum = 0
    this.orders.forEach(item => { sum += item.price }) return ['合計','','','',sum,''] },

3、elementUi的tabel組件如果要顯示合計的話，下面的prop是必須得加的

<el-table-column label="服務價格" prop="service_price">
    <template slot-scope="scope">{{scope.row.service_price}}</template>
</el-table-column>

4、elementUi的tabel組件復選框控制禁止選擇

<el-table-column type="selection" width="55" :selectable='checkboxInit'>
</el-table-column>

//methods里
checkboxInit(row,index){ 　　if (row.withdrawState==2)//這個判斷根據你的情況而定
　　　　return 0;//不可勾選，或者是return false/true
　　else
　　　　return 1;//可勾選
}

5、table展開功能

<h5>遠程工具列表：</h5>
<el-table ref="assistanceTool" :data="toolsOpt" row-key="name" :expand-row-keys="expands">
    <el-table-column type="expand">
          <template slot-scope="props">
        <div class="instructions">{{ props.row.instructions }}</div>
          </template>
    </el-table-column>
    <el-table-column prop="name" label="名稱"></el-table-column>
    <el-table-column prop="copyright" label="版權" width="150"></el-table-column>
    <el-table-column prop="version" label="版本" width="60"></el-table-column>
    <el-table-column prop="downurl" label="下載鏈接"></el-table-column>
    <el-table-column label="介紹" width="60">
        <template slot-scope="scope">
            <el-button @click="view(scope.row)" type="text" size="small">查看</el-button>
        </template>
    </el-table-column>
</el-table>
//1、首先需要：row-key="name" :expand-row-keys="expands" //2、點擊查看的方法：如果expands沒有就把name push進去，下面這種是一次只能展開一個，點擊別的，關閉之前的
view(row){ if (this.expands.indexOf(row.name) < 0) { this.expands = [] this.expands.push(row.name); } else { this.expands = [] } },

6、表格篩選功能

//1、首先需要加上下面這些，prop是必須加的，否則不生效
<el-table-column prop="category" label="類目" :filters="categoryFilter" :filter-method="filterType" filter-placement="bottom-end">
</el-table-column>

//2、定義categoryFilter數組存filter字段，然后在獲取數據的時候去遍歷賦值
fetchData(){ getScriptListApi().then(res => { if(res.status === 200){ this.scriptData = res.data res.data.forEach(item => { this.initFilter(this.typeFilter,item.type) this.initFilter(this.categoryFilter,item.category) }) } }) }, //3、加上下面2個公共方法即可
initFilter(array,item){ let _obj = { text:item, value:item } if(JSON.stringify(array).indexOf(JSON.stringify(_obj)) === -1){ array.push(_obj) } }, filterType(value,row,column){ const property = column['property']; return row[property] === value; },

　　另外還有一個  filter-change  方法（用@filter-change綁定），要在table根節點上設，而不是el-table-column節點的方法，那是個全局的方法，只要你的表頭有filter變化了，就會觸發