element ui table 展示
阿新 • • 發佈：2020-12-09
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="vue.js"></script> <script src="jquery-3.4.1.js"></script> <!-- element ui元件 --> <link rel="stylesheet" href="index.css"> <script src="index.js"></script> </head> <body> <div id="app"> <!-- 表格 表頭樣式 選擇後獲取本行內容 展開後獲取值--> <el-table ref="ref" :data="resData" :header-cell-style="css" @selection-change="handleSelectionChange" @expand-change="expanChange"> <el-table-column type="selection"></el-table-column> <el-table-column v-for="head in fields" :label="head.title":width="head.width"> <template slot-scope="scope"> <template v-if="head.field=='CZ'"> <span>操作</span> </template> <template v-else> <span v-html="dContrast(head.field,scope.row[head.field])"></span> </template> </template> </el-table-column> <!-- 展開行後的內容 --> <el-table-column type="expand"> <!-- 可以放子元件 --> </el-table-column> </el-table> </div> </body> <script> var vm; $(function () { vm = new Vue({ el: '#app', data: { resData: [ { task_name: 'aaaa',task_name1: 'aaaa',task_name2: 'aaaa',task_name3: 'aaaa',task_name4: 'aaaa' }, ], fields: [ { field: 'task_name', title: '任務名稱',width:200 }, { field: 'task_name1', title: '任務1' }, { field: 'task_name2', title: '任務2' }, { field: 'task_name3', title: '任務3' }, { field: 'task_name4', title: '任務4' }, { field: 'CZ', title: '操作' }, ], css:{ background:'#38b48b', color:'white', borderColor:'#fff' } }, mounted: function () { }, methods: { handleSelectionChange(v){ console.log(v); }, expanChange(row,expandedRows){ console.log(expandedRows); console.log(row); }, dContrast(key, dval) { // console.log(key); // console.log(dval); return dval; } } }) }) </script> </html>