惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

酷 壳 – CoolShell
酷 壳 – CoolShell
H
Hacker News: Front Page
P
Palo Alto Networks Blog
T
ThreatConnect
Apple Machine Learning Research
Apple Machine Learning Research
博客园_首页
T
True Tiger Recordings
P
Privacy & Cybersecurity Law Blog
B
Blog
IT之家
IT之家
Last Week in AI
Last Week in AI
F
Full Disclosure
Hacker News: Ask HN
Hacker News: Ask HN
C
Comments on: Blog
Microsoft Azure Blog
Microsoft Azure Blog
C
Cybersecurity and Infrastructure Security Agency CISA
Microsoft Security Blog
Microsoft Security Blog
博客园 - 【当耐特】
N
News and Events Feed by Topic
NISL@THU
NISL@THU
腾讯CDC
雷峰网
雷峰网
Security Latest
Security Latest
李成银的技术随笔
M
Microsoft Research Blog - Microsoft Research
L
LangChain Blog
L
Lohrmann on Cybersecurity
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
C
Check Point Blog
Y
Y Combinator Blog
Recent Announcements
Recent Announcements
博客园 - Franky
N
News | PayPal Newsroom
V
V2EX
A
About on SuperTechFans
The Register - Security
The Register - Security
月光博客
月光博客
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Google Online Security Blog
Google Online Security Blog
MyScale Blog
MyScale Blog
Cisco Talos Blog
Cisco Talos Blog
Vercel News
Vercel News
WordPress大学
WordPress大学
C
Cyber Attacks, Cyber Crime and Cyber Security
The Hacker News
The Hacker News
IntelliJ IDEA : IntelliJ IDEA – the Leading IDE for Professional Development in Java and Kotlin | The JetBrains Blog
IntelliJ IDEA : IntelliJ IDEA – the Leading IDE for Professional Development in Java and Kotlin | The JetBrains Blog
爱范儿
爱范儿
A
Arctic Wolf
L
LINUX DO - 最新话题
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More

博客园 - 此夏_唯美

新概念英语3单词表 git回滚代码 git常用命令大全 element动态表单验证一 vue+element+Cascader 级联选择器任意一级选项,去掉单选框radio vue+wangEditor编辑器,上传图片请求后台接口 vue3+vant4+vuex4入门案例 vue3+vant3封装省市区组件 前端工具vscode将英文设置中文简单方便 vue3打包后一片空白控制台报错 vue实现自定义字体库 element-ui跨行 - 此夏_唯美 Element-ui树形控件el-tree鼠标移入显示隐藏效果超简单 vue表格拖拽使用Sortable插件库 vue框架文字滚动插件 vue项目浏览器ioc小图标 vue搭建项目iview+axios+less vue移动端在线签名 Vue中的input输入框无法输入强制渲染
Vue+Element+Table表格动态跨列文章
此夏_唯美 · 2020-11-02 · via 博客园 - 此夏_唯美
  1 <template class="SysRole">
  2   <div>
  3     <el-table
  4       :data="tableData"
  5       :span-method="arraySpanMethod"
  6       border
  7       style="width: 100%">
  8       <el-table-column
  9         prop="id"
 10         label="ID"
 11         width="180">
 12       </el-table-column>
 13       <el-table-column
 14         prop="name"
 15         label="姓名">
 16       </el-table-column>
 17       <el-table-column
 18         prop="amount1"
 19         sortable
 20         label="数值 1">
 21       </el-table-column>
 22       <el-table-column
 23         prop="amount2"
 24         sortable
 25         label="数值 2">
 26       </el-table-column>
 27       <el-table-column
 28         prop="amount3"
 29         sortable
 30         label="数值 3">
 31       </el-table-column>
 32     </el-table>
 33  
 34  
 35   </div>
 36 </template>
 37  
 38 <script>
 39   export default {
 40     data() {
 41       return {
 42         tableData: [{
 43           id: '12987122',
 44           name: '王小虎',
 45           amount1: '234',
 46           amount2: '3.2',
 47           amount3: 10
 48         },{
 49           id: '12987122',
 50           name: '王小虎',
 51           amount1: '165',
 52           amount2: '4.43',
 53           amount3: 12
 54         }, {
 55           id: '12987122',
 56           name: '王小虎',
 57           amount1: '324',
 58           amount2: '1.9',
 59           amount3: 9
 60         },{
 61           id: '12987122',
 62           name: '王小虎',
 63           amount1: '621',
 64           amount2: '2.2',
 65           amount3: 17
 66         },{
 67           id: '12987122',
 68           name: '王小虎',
 69           amount1: '539',
 70           amount2: '4.1',
 71           amount3: 15
 72         },{
 73           id: '12987122',
 74           name: '王小虎',
 75           amount1: '234',
 76           amount2: '3.2',
 77           amount3: 10
 78         },{
 79           id: '12987122',
 80           name: '王小虎',
 81           amount1: '165',
 82           amount2: '4.43',
 83           amount3: 12
 84         },{
 85           id: '12987122',
 86           name: '王小虎',
 87           amount1: '324',
 88           amount2: '1.9',
 89           amount3: 9
 90         },{
 91           id: '12987122',
 92           name: '王小虎',
 93           amount1: '621',
 94           amount2: '2.2',
 95           amount3: 17
 96         },{
 97           id: '12987122',
 98           name: '王小虎',
 99           amount1: '539',
100           amount2: '4.1',
101           amount3: 15
102         },{
103           id: '12987122',
104           name: '王小虎',
105           amount1: '539',
106           amount2: '4.1',
107           amount3: 15
108         },{
109           id: '12987122',
110           name: '王小虎',
111           amount1: '539',
112           amount2: '4.1',
113           amount3: 15
114         },{
115           id: '12987122',
116           name: '王小虎',
117           amount1: '539',
118           amount2: '4.1',
119           amount3: 15
120         }],
121         colArr1: [6,0,0,0,0,0,6,0,0,0,0,0,1],
122          //第一二列的合并表格单元格,1表示不合并单元格,0表示该行要合并单元格
123       };
124     },
125  
126     mounted(){
127       console.log(this.tableData.length)
128     },
129  
130     methods: {
131       arraySpanMethod({ row, column, rowIndex, columnIndex }) {
132         //合拼第一二列的行
133         if (columnIndex === 0) {
134           const _row = this.colArr1[rowIndex];
135           const _col = _row > 0 ? 1 : 0;
136           //返回行和列的合拼数
137           return {
138             rowspan: _row,
139             colspan: _col
140           };
141         }
142  
143       }
144       },
145  
146   };
147 </script>