用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'
  }
] }
}

效果图如上

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
Vue Element是一个基于Vue.js框架构建的UI组件库,提供了丰富的组件,方便开发者构建各种交互界面。要实现SKU表格,可以借助Vue Element的Table组件和选择器组件。 首先,需要准备好SKU的数据结构,包括SKU的属性以及对应的值。可以使用一个嵌套的数组来表示,例如: ``` [ { name: '颜色', values: ['红色', '蓝色', '绿色'] }, { name: '尺码', values: ['S', 'M', 'L'] } ] ``` 接下来,在Vue组件中使用Table组件来展示SKU表格。可以使用v-for指令循环遍历SKU的属性和值,生成表头和表格数据。同时,可以给每个单元格添加选择器组件来选择对应的属性值。 示例代码如下: ```html <template> <el-table :data="tableData"> <el-table-column v-for="attr in attributes" :key="attr.name" :label="attr.name" > <template slot-scope="scope"> <el-select v-model="scope.row[attr.name]" placeholder="请选择"> <el-option v-for="value in attr.values" :key="value" :label="value" :value="value"></el-option> </el-select> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { attributes: [ { name: '颜色', values: ['红色', '蓝色', '绿色'] }, { name: '尺码', values: ['S', 'M', 'L'] } ], tableData: [] }; }, created() { // 生成SKU表格数据 const skuData = this.generateSkuData(this.attributes); this.tableData = skuData; }, methods: { generateSkuData(attributes) { // 根据属性生成表格数据 const skuData = []; const rowLength = attributes.reduce((acc, curr) => acc * curr.values.length, 1); for (let i = 0; i < rowLength; i++) { const rowData = {}; let remain = i; attributes.forEach(attr => { const valueIndex = remain % attr.values.length; rowData[attr.name] = attr.values[valueIndex]; remain = Math.floor(remain / attr.values.length); }); skuData.push(rowData); } return skuData; } } }; </script> ``` 通过上述代码,可以实现一个基于Vue Element的SKU表格。每个单元格都可以通过选择器组件选择对应的属性值,从而构建SKU表格。当选择器的值发生改变时,可以通过监听事件获取到最新的SKU数据。这样,就可以根据选择器的值进行相应的业务操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值