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. ...
随机推荐
- dbcp_c3p0连接mysql8.0.13
背景 学习数据库的使用,上次没有记录,现在都回忆不起来了,所以这次重新学的时候顺便记录下. 配置环境 win10 jdk11 idea mysql8.0.13 DBCP连接使用 用配置文件目前我连接不 ...
- python map() 的使用方法
>>>def square(x) : # 计算平方数 ... ... >>> map(square, [,,,,]) # 计算列表各个元素的平方 [, , , , ...
- 小程序wx.showLoading的使用
比如说在用户点击登录的时候,为了防止用户点击点第二次,可以加一个loading,在请求结束之后就关闭
- vue中子组件传值给父组件
index.js 子组件 父组件
- lucene IndexOptions可以设置DOCS_AND_FREQS_AND_POSITIONS_AND_OFFSETS DOCS，ES里也可以设置
org.apache.lucene.index Enum Constants Enum Constant and Description DOCS_AND_FREQS Only documents ...
- Alpha冲刺（4/4）
队名:福大帮 组长博客链接:https://www.cnblogs.com/mhq-mhq/p/11913386.html 作业博客 :https://edu.cnblogs.com/campus/f ...
- fcntl 函数
设置文件的flags,阻塞设置成非阻塞,非阻塞设置成阻塞(这连个在server开发中可以封装为基本函数) 线程引入 pthread_self 和 pthread_equal 原因 ——解决不同平台的问 ...
- 详谈mysqldump数据导出的问题
1,使用mysqldump时报错(1064),这个是因为mysqldump版本太低与当前数据库版本不一致导致的. mysqldump: Couldn't execute 'SET OPTION SQL ...
- Oracle 存储过程—为数传递变量
oracle 存储过程的基本语法create or replace procedure proc1( p_para1 varchar2, p_para2 out varchar2, p_para3 i ...
- Apache RocketMQ 的过去、现在和未来 原创： DataPipeline DataPipeline数见科技 前天
Apache RocketMQ 的过去.现在和未来 原创: DataPipeline DataPipeline数见科技 前天