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. ...
随机推荐
- 第一章使用JSP/Server技术开发新闻发布系统第一章动态网页开发基础
一:为什么需要动态网页 由于静态网页的内容是固定的,不能提供个性化和定制化得服务,使用动态网页可真正地与用户实现互动. 二:什么是动态网页 ①:动态网页是指在服务器端运行的,使用程序语言设 ...
- polyfit 多项式曲线拟合matlab
polyfit 多项式曲线拟合 全页折叠 语法 p = polyfit(x,y,n) [p,S] = polyfit(x,y,n) [p,S,mu] = polyfit(x,y,n) 说明 示例 ...
- laravel-china 镜像停止服务
php 的很多开发都会用到composer.然后国内的镜像又慢,很多人会选择用laravel-china的镜像. 之前一直用的很好.今天突然发现不能composer update.出现报错.WTF!! ...
- Java 【 ArrayList应用 】 (SDUT 4069 C~K的班级)
Java 里面的所有的东西 数组.字符数组.等等,都要 new 新申请. C~K的班级 代码: package test; import java.util.*; public class Main ...
- $('#jyzjg').combobox('clear');
$('#jyzjg').combobox('clear'); alert($('#jyzjg').combobox("getValue" ...
- spring boot 之登录笔记
在测试平台的开发中,会牵涉到登录内容,页面需要登录后才能访问,所以,对于登录的开发是很有必要的.本文记录我在系统登录的一些自己的做法. 首先对登录进行设计. 如下: 1.登录密码输入错误超过次数限制 ...
- 微信小程序 wxParse插件显示视频
修改wxParse/html2json.js 文件 ,在 html2json(html, bindName) 方法里 var node = { node: 'element', tag: tag, } ...
- Java枚举知识点
近几天从单例模式及阿里开发手册中遇到枚举,之前没怎么关注过. 便学习一下,此次看了多方资料,并写Demo实现,记录下知识点,方便之后巩固. 枚举的两个优点: 1. 保证了类型安全:调用者无法随意传一个 ...
- IIS配置问题：WCF服务打开svc文件报错：请求的内容似乎是脚本，因而将无法由静态文件处理程序来处理
在参考网上多个教程后,我用IIS配置的网站终于能正常打开了,但是很快就发现了新的问题,在打开WCF服务中的svc文件时报错: HTTP 错误 404.17 - Not Found请求的内容似乎是脚本, ...
- spring could 微服务 跨域问题（CORS ）
问题发现 正常情况下,跨域是这样的:1. 微服务配置跨域+zuul不配置=有跨域问题2. 微服务配置+zuul配置=有跨域问题3. 微服务不配置+zuul不配置=有跨域问题4. 微服务不配置+zuul ...