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. ...
随机推荐
- kindeditor如何使用
亲测能用: URL地址:https://jingyan.baidu.com/article/ab69b270b287332ca7189f19.html
- spark常见错误【持续更新】
错误1.错误: 找不到或无法加载主类 idea.scala代码 idea 导入的scala工程,编写代码后报该错误. 原因:\src\main\scala 包路径下没有将scala这个包设置成Sour ...
- Input类中常用的验证方式
Deolin一般将Input类对象作为POST请求方法的参数, Input类的域与前端的数据结构一一对应,由于后端不应该相信前端传过来的任何数据, 所以前端的数据对象先绑定到Input对象中,通过JS ...
- 正则re.complie作用
封装一个原本重复使用的正则表达式 prog = re.compile(pattern) result = prog.match(string)
- Python里面如何拷贝一个对象？（赋值，浅拷贝，深拷贝的区别）
答:赋值(=),就是创建了对象的一个新的引用,修改其中任意一个变量都会影响到另一个. 浅拷贝:创建一个新的对象,但它包含的是对原始对象中包含项的引用(如果用引用的方式修改其中一个对象,另外一个也会修改 ...
- 牛客OI周赛10-提高组：B-Taeyeon的困惑(值域线段树)
做法 单点加单点删,在值域线段树上直接二分就能求值前\(K\)小的和 Code #include<bits/stdc++.h> typedef long long LL; const LL ...
- [WEB安全]代码/命令执行总结
0x01 代码执行 1.1 概念 远程代码执行实际上是调用服务器网站代码进行执行. 1.2 常见执行方法 eval eval():将字符串当做函数进行执行(需要传入一个完整的语句) demo: < ...
- PaintCode 教程：矢量图轻松转换成CoreGraphics代码
本文译自Ranwenderlich的这篇:http://www.raywenderlich.com/100281/paintcode-for-designers-getting-started Pai ...
- arcgis python 参数类型和含义
数据类型 datatype 关键字 描述 地址定位器 DEAddressLocator 用于地理编码的数据集,存储地址属性.关联的索引以及用于定义将地点的非空间描述转换为空间数据这一过程的规则. 地址 ...
- JAVA SparkSQL初始和创建DataFrame的几种方式
建议参考SparkSQL官方文档:http://spark.apache.org/docs/latest/sql-programming-guide.html 一.前述 1.SparkSQ ...