element-ui中的表格嵌套表格
element-ui中有详细的各种表格及表格方法。也有表格展开出现二级的样式，但是却没有表格嵌套二级表格的方案，于是就自己写了一个，样式图如下：
展开后如下
这就是一个普通的二级表格嵌套，用的是el-table中的type="expand"；
HTML代码如下：
<div class="service-center">
<el-table
border
:data="tableData"
@expand-change="expandChange"
v-loading="loading"
style="width: 100%"
>
<el-table-column type="expand">
<template slot-scope="scope">
<el-table :data="scope.row.children" style="width: calc(100% - 47px)" class="two-list">
<el-table-column type="selection" width=""></el-table-column>
<el-table-column prop="city_name" label="城市"></el-table-column>
<el-table-column prop="price" label="成本价"></el-table-column>
<el-table-column prop="sale_price" label="售出价"></el-table-column>
<el-table-column prop="discount_price" label="折扣价"></el-table-column>
<el-table-column prop="product_online_time" label="上架时间"></el-table-column>
<el-table-column prop="product_off_time" label="下架时间"></el-table-column>
<el-table-column></el-table-column>
<el-table-column></el-table-column>
<el-table-column prop="cat_id" label="状态">
<template slot-scope="scope">
<span v-if="scope.row.is_online ==1">
<span style="color:#00B46D">上架</span>
</span>
<span v-else>
<span style="color:#D75C89">下架</span>
</span>
</template>
</el-table-column>
<el-table-column prop="cat_id" label="新增">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
<el-button
@click="lowershelf(scope.row)"
type="text"
size="small"
v-if="scope.row.is_online ==1"
>下架</el-button>
<el-button @click="upshelf(scope.row)" type="text" size="small" v-else>上架</el-button>
</template>
</el-table-column>
</el-table>
<div class="newpushcity">
<span>
<el-cascader
:options="optionsZone"
:props="propsArea"
placeholder="请选择注册地区"
v-model="seartharea"
class="threearea"
@change="changearea"
></el-cascader>
</span>
<span>
<el-input v-model="search" placeholder="请输入成本价"></el-input>
</span>
<span>
<el-input v-model="search" placeholder="请输入售出价"></el-input>
</span>
<span>
<el-input v-model="search" placeholder="请输入折扣价"></el-input>
</span>
<span>
<el-date-picker v-model="updata" type="date" placeholder="选择上架时间"></el-date-picker>
</span>
<span>
<el-date-picker v-model="lowdata" type="date" placeholder="选择下架时间"></el-date-picker>
</span>
<span>保存</span>
</div>
</template>
</el-table-column> <el-table-column type="selection" width=""></el-table-column>
<el-table-column prop="product_id" label="ID"></el-table-column>
<el-table-column label="商品名称" prop="name"></el-table-column>
<el-table-column label="商品构成" prop="name">
<template slot-scope="scope">
<span v-if="scope.row.sku.length==1">
<span>{{scope.row.sku[].sku_name}}</span>
</span>
<span v-if="scope.row.sku.length==2">
<span>{{scope.row.sku[].sku_name}}+{{scope.row.sku[].sku_name}}</span>
</span>
</template>
</el-table-column>
<el-table-column label="商品描述" prop="spu_desc"></el-table-column>
<el-table-column label="支付方式" prop="pay_type">
<template slot-scope="scope">
<span v-if="scope.row.pay_type==1">
<span>全款</span>
</span>
<span v-if="scope.row.pay_type==2">
<span>预付款支付</span>
</span>
<span v-else>
<span></span>
</span>
</template>
</el-table-column>
<el-table-column label="渠道" prop="from_type">
<template slot-scope="scope">
<span v-if="scope.row.from_type ==1">
<span>共道</span>
</span>
<span v-if="scope.row.from_type ==2">
<span>个人代账</span>
</span>
<span v-if="scope.row.from_type ==3">
<span>电商园区</span>
</span>
<span v-if="scope.row.from_type ==4">
<span>钉钉</span>
</span>
<span v-if="scope.row.from_type ==5">
<span>app</span>
</span>
<span v-if="scope.row.from_type ==6">
<span>官网</span>
</span>
<span v-if="scope.row.from_type ==7">
<span>阿里云</span>
</span>
<span v-if="scope.row.from_type ==8">
<span>阿里云市场</span>
</span>
<span v-else>
<span></span>
</span>
</template>
</el-table-column>
<el-table-column label="商品类目" prop="product_type">
<template slot-scope="scope">
<span v-if="scope.row.product_type==1">
<span>代账</span>
</span>
<span v-if="scope.row.product_type==2">
<span>工商</span>
</span>
<span v-if="scope.row.product_type==3">
<span>套餐</span>
</span>
<span v-if="scope.row.product_type==4">
<span>其他</span>
</span>
<span v-else>
<span></span>
</span>
</template>
</el-table-column>
<el-table-column label="商品标签" prop="product_sign"></el-table-column>
<el-table-column label="状态" prop="is_online">
<template slot-scope="scope">
<span v-if="scope.row.is_online ==1">
<span style="color:#00B46D">上架</span>
</span>
<span v-else>
<span style="color:#D75C89">下架</span>
</span>
</template>
</el-table-column>
<el-table-column label="操作" prop="pay">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
<el-button
@click="lowershelf(scope.row)"
type="text"
size="small"
v-if="scope.row.is_online ==1"
>下架</el-button>
<el-button @click="upshelf(scope.row)" type="text" size="small" v-else>上架</el-button>
</template>
</el-table-column>
</el-table>
</div>
即在
element-ui中的表格嵌套表格的更多相关文章
- element ui中循环出来的表格勾选问题
需求是这样的,一个房主屋里面有多个电表,每一个表是一个账户,一次只能给一个账户缴费,在点击go按钮进行缴费,这个时候判断是否跨表勾选,跨表格勾选则弹窗提示,反之符合需求,走缴费逻辑 上代码 <! ...
- Element UI 中组件this.$message报错
最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...
- 关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
- element ui 中的 resetFields() 报错'resetFields' of undefined
每次做各种form表单时,首先要注意的是初始化,但是刚开始若没有仔细看文档,则会自己写个方法将数据设置为空,但是这样就会出现一个问题,表单内存在各种验证,假如是一个弹框内有form表单,弹框出现就执行 ...
- element ui中的一些小技巧
最近写公司的项目,这项目是vue和element ui搭建的, 做的是一套电力系统的管理平台. 遇到一个小麻烦,用过element ui 的都知道,使用element ui 弹框,点击空白处,默认是 ...
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- 在vue中关于element UI 中表格实现下载功能，表头添加按钮，和点击事件失效的解决办法。
因为在element 中表格是使用el-table的形式通过数据来支撑结构,所以,表格的样式没有自己写的灵活,所以有了没法添加按钮的烦恼.下面是解决的方法. 准备工作: 一.下载npm安装包两个 1. ...
随机推荐
- TensorFlow(十五)：使用inception-v3实现各种图像识别
上代码: import tensorflow as tf import os import numpy as np import re from PIL import Image import mat ...
- gulp4配置多页面项目编译打包
又开始公司的新项目了... 那当我们拿到公司新项目的时候我们需要做些什么呢? 下面就来分享一下我的工作步骤吧(仅使用于初学者,大神勿见怪- -,有不好的地方希望指出,十分感谢) 1. 整版浏览 这是一 ...
- Colab使用教程
目录 有关链接 使用GPU 切换文件夹 参考 有关链接 Google Colabratory Google Drive 使用GPU 以下两种方式都可以: "修改"->&quo ...
- Linux内存使用情况以及内存泄露情况
1. 内存使用情况分析 http://www.360doc.com/content/15/1118/13/17283_514054063.shtml https://www.linuxidc.com/ ...
- 相关 Excel 开源类库性能对比
性能数据 · Excelize 中文文档https://xuri.me/excelize/zh-hans/performance.html Golang library for reading and ...
- vuecli3集成easyui
思路是这样的,首先要将jquery设置成全局,然后就可以正常使用easyUI了. jquery安装命令: npm install --save jquery jquery-easyui安装命令: np ...
- linux内核中设备树的维护者仓库地址
1. 仓库地址 git://git.kernel.org/pub/scm/linux/kernel/git/robh/linux.git https://kernel.googlesource.com ...
- 微信小程序测试检查点
1.权限测试 需要检查以下几种情况下微信用户访问的权限1)未授权微信登录小程序未授权时,一般使用一些业务功能的时候,都会弹出提醒:先授权再操作对应功能.或在提交数据到后台的时候,会提示补充相关身份信息 ...
- 在 kubernetes 集群中部署一套 web 网站（网页内容不限)
环境准备 一台部署节点,一台master节点,还有两台节点node1,node2 完好的k8s集群环境 思路一: 在node1和node2节点上通过宿主机与容器之间目录映射和端口映射上线静态网站(或动 ...
- Day5作业,商城+ATM机+后台管理
晚来了....东西太多,需要写的blog内容太多,re讲的渣渣,不明白为什么oldboy经常换老师,吐槽下吧,真心不爱了.... github地址在这:https://github.com/ccorz ...