el-table的使用总结

一，常规使用

1，实现效果

2，具体代码

 <el-table :data="tableData" header-row-class-name="header_row_className" :header-cell-style="{ 
    'background-color': '#E5EEFF' }" @selection-change="handleSelectionChange" style="width: 100%"> <el-table-column type="selection" label="全选" align="center" v-if="state==0|| state==8|| state==1" width="80"> </el-table-column> <el-table-column align="center" prop="wx_code" label="订单号" > <template slot-scope="scope"> <div> <span class="redCircle"></span> <a class="tab_a" @click="toDetail(scope,'订单详情')">{ 
   { 
   scope.row.wx_code}}</a> <span>(待打印)</span> </div> </template> </el-table-column> <el-table-column label="类型" align="center" > <template slot-scope="scope"> <div>{ 
   { 
   scope.row.takeaway=='0'?'到店订单':'外卖点餐'}}</div> </template> </el-table-column> <el-table-column prop="small_code" label="桌位号/取餐号" align="center" > </el-table-column> <el-table-column prop="shop_admin_phone" label="操作员" align="center" width="100"> </el-table-column> <el-table-column prop="parent_payment" label="支付方式" align="center" > <template slot-scope="scope"> <div class="green" v-if="scope.row.parent_payment==1001">现金支付</div> <div class="green" v-if="scope.row.parent_payment==1002">签单记账</div> <div class="green" v-if="scope.row.parent_payment==1003">线下刷卡</div> <div class="green" v-if="scope.row.parent_payment==1004">线上支付</div> <div class="green" v-if="scope.row.parent_payment==1005">龙支付</div> </template> </el-table-column> <el-table-column prop="pay_money" label="订单支付金额" align="center" > </el-table-column> <el-table-column prop="grand_total" label="总计(结算金额)" align="center" > </el-table-column> <el-table-column prop="refund_penging_fee" label="待退款金额" align="center" > </el-table-column> <el-table-column prop="refund_fee" label="已退款金额" align="center" > </el-table-column> <el-table-column prop="status" label="状态" align="center" > <template slot-scope="scope"> <div>{ 
   { 
   scope.row.closed=='0'?'未关闭':'已关闭'}}</div> <div class="green" v-if="scope.row.closed=='0' && scope.row.status==0">(未付款)</div> <div class="green" v-if="scope.row.closed=='0' && scope.row.status==1">(已付款)</div> <div class="green" v-if="scope.row.closed=='0' && scope.row.status==2">(配送中)</div> <div class="green" v-if="scope.row.closed=='0' && scope.row.status==5">(退款审核)</div> <div class="green" v-if="scope.row.closed=='0' && scope.row.status==6">(全额退款)</div> <div class="green" v-if="scope.row.closed=='0' && scope.row.status==7">(部分退款)</div> <div class="green" v-if="scope.row.closed=='0' && scope.row.status==8">(已下单)</div> <div class="green" v-if="scope.row.closed=='0' && scope.row.status==9">(已完成)</div> <div class="green" v-if="scope.row.closed=='0' && scope.row.status==2101">配送中(待配送员接单)</div> <div class="green" v-if="scope.row.closed=='0' && scope.row.status==2102">配送中(配送员已接单)</div> <div class="green" v-if="scope.row.closed=='0' && scope.row.status==2103">配送中(配送员配送中)</div> <div class="green" v-if="scope.row.closed=='0' && scope.row.status==2104">配送中(配送员配送完成)</div> <div class="green" v-if="scope.row.closed=='0' && scope.row.status==2105">配送中(配送员取消配送)</div> <div class="green" v-if="scope.row.closed=='0' && scope.row.status==2106">配送中(配送员申请取消)</div> </template> </el-table-column> <el-table-column prop="create_date" label="下单时间" align="center" > </el-table-column> <el-table-column prop="operation" label="操作" align="center" width="180"> <template slot-scope="scope"> <div class="operationVid"> <span class="operationBef" @click="payList(scope)" v-if="handleMenu_1(scope.row)=='付款'">付款</span> <span class="operationBef" @click="operFinish(scope)" v-if="handleMenu_1(scope.row)=='完成'">完成</span> <span class="operationBef" @click="operFinish(scope)" v-if="handleMenu_1(scope.row)=='审核'">审核</span> <el-dropdown trigger="click" @command="handleCommand"> <span class="el-dropdown-link"> 更多<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item :command="beforeHandleCommand(scope,'订单详情')" v-if="handleMenu_2(scope.row).has('订单详情')">订单详情</el-dropdown-item> <el-dropdown-item :command="beforeHandleCommand(scope,'前台打印')" v-if="handleMenu_2(scope.row).has('前台打印')">前台打印</el-dropdown-item> <el-dropdown-item :command="beforeHandleCommand(scope,'后厨打印')" v-if="handleMenu_2(scope.row).has('后厨打印')">后厨打印</el-dropdown-item> <el-dropdown-item :command="beforeHandleCommand(scope,'订单退款')" v-if="handleMenu_2(scope.row).has('订单退款')">订单退款</el-dropdown-item> <el-dropdown-item :command="beforeHandleCommand(scope,'关闭订单')" v-if="handleMenu_2(scope.row).has('关闭订单')">关闭订单</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> </template> </el-table-column> </el-table> 

多选的处理：

 //处理表格多选 handleSelectionChange(val) { 
    this.multipleSelection = val; this.selectArray=this.multipleSelection.map((item)=>{ 
    let id=item.id return id }) }, 

二，某一列的样式表更

具体代码：

//element ui中的一个表格样式修改 changeCellStyle(row) { 
    if (row.column.label === "商品类目") { 
    return "background-color: #E5EEFF"; // 修改的样式 } else { 
    return "color: #000000"; } }, 

官网资料：

三，某行类型特别多的情况

 <el-table-column prop="source" label="种类" align="center" width="100"> <template slot-scope="scope"> <span>{ 
   { 
    source[scope.row.source] }}</span> </template> </el-table-column> 

 data() { 
    return { 
    source:{ 
    1:'飞鹅打印机', 2:'瑞工打印机', 3:'飞蛾标签打印机', 4:'斯普瑞标签打印机', 5:'斯普锐打印机', 6:'序号为6的打印机' }, } }, 

也就是说{ {}}里其实可以写js表达式（表达式和语句是有区别的），它的作用域就是当前的vue文件，所以通过js对象的形式，就可以把多个类别比较优雅地写出来。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/hdkf/10927.html