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变化了，就会触发

来源：oschina

链接：https://my.oschina.net/u/4391746/blog/3945634

标签

element

Apache HBase