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

推荐订阅源

aimingoo的专栏
aimingoo的专栏
The Last Watchdog
The Last Watchdog
Project Zero
Project Zero
T
Threatpost
T
The Blog of Author Tim Ferriss
云风的 BLOG
云风的 BLOG
N
Netflix TechBlog - Medium
B
Blog
The GitHub Blog
The GitHub Blog
F
Full Disclosure
MyScale Blog
MyScale Blog
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
Y
Y Combinator Blog
GbyAI
GbyAI
Recent Announcements
Recent Announcements
MongoDB | Blog
MongoDB | Blog
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
D
Docker
NISL@THU
NISL@THU
爱范儿
爱范儿
Spread Privacy
Spread Privacy
F
Fortinet All Blogs
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
博客园 - 叶小钗
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Hacker News - Newest:
Hacker News - Newest: "LLM"
Simon Willison's Weblog
Simon Willison's Weblog
S
Security @ Cisco Blogs
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
PCI Perspectives
PCI Perspectives
V
V2EX
人人都是产品经理
人人都是产品经理
W
WeLiveSecurity
IT之家
IT之家
P
Proofpoint News Feed
Engineering at Meta
Engineering at Meta
博客园_首页
Forbes - Security
Forbes - Security
Cloudbric
Cloudbric
有赞技术团队
有赞技术团队
Application and Cybersecurity Blog
Application and Cybersecurity Blog
B
Blog RSS Feed
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
P
Palo Alto Networks Blog
The Register - Security
The Register - Security
Google DeepMind News
Google DeepMind News
Hacker News: Ask HN
Hacker News: Ask HN
腾讯CDC
T
Threat Research - Cisco Blogs
Cyberwarzone
Cyberwarzone

博客园 - 此夏_唯美

新概念英语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>