用vue+element-ui实现表格里嵌套表格

静态页面,数据都是写死的

<template>
	 <el-table
	  :data="tableData"
	  style="width: 100%">
	  <el-table-column type="expand">
	    <template slot-scope="props">
	      <el-table
	        :data="dataList"
	        align="center"
	        stripe>
	        <el-table-column
	          align="center"
	          prop="duty">
	        </el-table-column>
	        <el-table-column
	          align="center"
	          prop="guard">
	        </el-table-column>
	        <el-table-column
	          align="center"
	          prop="accident">
	        </el-table-column>
	        <el-table-column
	          align="center"
	          prop="base">
	        </el-table-column>
	        <el-table-column
	          align="center"
	          prop="import">
	        </el-table-column>
	      </el-table>
	    </template>
	  </el-table-column>
	  <el-table-column
	    label="报号"
	    prop="id">
	  </el-table-column>
	  <el-table-column
	    label="号"
	    prop="pigeonhole">
	  </el-table-column>
	  <el-table-column
	    label="日期"
	    prop="date">
	  </el-table-column>
	  <el-table-column
	  label="事期"
	  prop="scene">
	</el-table-column>
	  <el-table-column
	  label="地点"
	  prop="scenePlace">
	</el-table-column>
	  <el-table-column
	  label="姓名"
	  prop="name">
	</el-table-column>
	  <el-table-column
	  label="诊断"
	  prop="clinic">
	</el-table-column>
	  <el-table-column
	  label="状态"
	  prop="legal">
	</el-table-column>
	  <el-table-column
	    label="方式"
	    prop="pay">
	  </el-table-column>
	  <el-table-column
	    label="有无"
	    prop="survey">
	  </el-table-column>
	</el-table>
</template>
js里data里:
data(){
		return{
		tableData: [
  {
    id: 'P201900001',
    pigeonhole: 'GD123456789', 
    date: '2019-1-31',
    scene: '2019-1-31',
    scenePlace: '中国',
    name: '鲜花',
    clinic: '临床', 
    legal: '已支付',
    pay: '转账',
    survey: '2019-02-23'
  },
  {
    id: 'P201900002',
    pigeonhole: 'GD123456789', 
    date: '2019-1-31',
    scene: '2019-1-31',
    scenePlace: '中国',
    name: '鲜花',
    clinic: 'hjgrf', // 
    legal: '已支付', 
    pay: '转账',
    survey: '2019-02-23'
  },
  {
    id: 'P201900003',
    pigeonhole: 'GD123456789', 
    date: '2019-1-31',
    scene: '2019-1-31',
    scenePlace: '中国',
    name: '鲜花',
    clinic: 'hjgrf', /
    legal: '已支付', 
    pay: '内部转账',
    survey: '2019-02-23'
  }
],
dataList: [
  {
    duty: '责任',
    guard: '预防',
    accident: '意外',
    base: '基础',
    import: '重大'
  },
  {
    duty: '金额',
    guard: '3000',
    accident: '1000',
    base: '2000',
    import: '4000'
  }
] }
}

效果图如上

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值