el-table的使用总结

时间:2025-04-01 13:57:23
<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=".parent_payment==1001">现金支付</div> <div class="green" v-if=".parent_payment==1002">签单记账</div> <div class="green" v-if=".parent_payment==1003">线下刷卡</div> <div class="green" v-if=".parent_payment==1004">线上支付</div> <div class="green" v-if=".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="=='0' && ==0">(未付款)</div> <div class="green" v-if="=='0' && ==1">(已付款)</div> <div class="green" v-if="=='0' && ==2">(配送中)</div> <div class="green" v-if="=='0' && ==5">(退款审核)</div> <div class="green" v-if="=='0' && ==6">(全额退款)</div> <div class="green" v-if="=='0' && ==7">(部分退款)</div> <div class="green" v-if="=='0' && ==8">(已下单)</div> <div class="green" v-if="=='0' && ==9">(已完成)</div> <div class="green" v-if="=='0' && ==2101">配送中(待配送员接单)</div> <div class="green" v-if="=='0' && ==2102">配送中(配送员已接单)</div> <div class="green" v-if="=='0' && ==2103">配送中(配送员配送中)</div> <div class="green" v-if="=='0' && ==2104">配送中(配送员配送完成)</div> <div class="green" v-if="=='0' && ==2105">配送中(配送员取消配送)</div> <div class="green" v-if="=='0' && ==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()=='付款'">付款</span> <span class="operationBef" @click="operFinish(scope)" v-if="handleMenu_1()=='完成'">完成</span> <span class="operationBef" @click="operFinish(scope)" v-if="handleMenu_1()=='审核'">审核</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().has('订单详情')">订单详情</el-dropdown-item> <el-dropdown-item :command="beforeHandleCommand(scope,'前台打印')" v-if="handleMenu_2().has('前台打印')">前台打印</el-dropdown-item> <el-dropdown-item :command="beforeHandleCommand(scope,'后厨打印')" v-if="handleMenu_2().has('后厨打印')">后厨打印</el-dropdown-item> <el-dropdown-item :command="beforeHandleCommand(scope,'订单退款')" v-if="handleMenu_2().has('订单退款')">订单退款</el-dropdown-item> <el-dropdown-item :command="beforeHandleCommand(scope,'关闭订单')" v-if="handleMenu_2().has('关闭订单')">关闭订单</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> </template> </el-table-column> </el-table>