vue + element動態多表頭與動態插槽
阿新 • • 發佈:2021-12-16
目錄
- 一、需求
- 二、效果
- 三、全部程式碼
一、需求
滿足使用者自行配置表格,減少對系統程式碼維護量。
二、效果
表頭on:
說明:scope(欄位名可另取)為是否對該列開啟插槽。有propChildren包含多級表頭。
tableHead: [{ key: '1',label: '日期',prop: 'date',width: '100',headerAlign: 'center',align: 'center',scope: false,sortable: true },{ key: '2',label: '姓名',prop: 'name',sortable: false },{ key: '3',label: '分析情況',prop: 'analysis',propChildren: [{ key: '31',label: '同比',prop: 'TB',scope: true,sortable: true },{ key: '32',label: '環比',prop: 'HB',sortable: true }http://www.cppcns.com,] },{ key: '4',label: '金額',prop: 'price',align: 'right',{ key: '5',label: '地址',prop: 'address',width: '',headerAlign: 'left',align: 'left',sortable: false } ],
三、全部程式碼
<template> <el-table :data="tableData" stripe resizable border height="300" style="width: 1000px" > <el-table-column type="index" :index="indexMethod" label="序號" align="center" width="60" > </el-table-column> <el-table-column v-for="(item,index) in tableHead" :key="index" :prop="item.prop" :label="item.label" :width="item.width" :align="item.align" :headerAlign="item.headerAlign" :sortable="item.sortable" show-overflow-tooltip > <el-table-column v-for="(item,index) in item.propChildren" :key="index" :prop="item.prop" :label="item.label" :width="item.width" :align="item.align" :headerAlign="item.headerAlign" :sortable="item.sortable" show-overflow-tooltip > <template slot-scope="scope"> <div v-if="item.scope === true"> <div v-if="scope.row[item.prop]lLocJyHQ== ''"> {{ scope.row[item.prop] }} </div> <div v-else-iflLocJyHQ="scope.row[item.prop] > '0'" style="color: green"> {{ scope.row[item.prop] }}%<i class="el-icon-caret-top"></i> </div> <div v-else-if="scope.row[item.prop] < '0'" style="color: red"> {{ scope.row[item.prop] }}%<i class="el-icon-caret-bottom"></i> </div> </div> <div v-else-if="scope.row[item.prop] < '0'" style="color: red"> {{ scope.row[item.prop] }} </div> <div v-else>{{ scope.row[item.prop] }}</div> </template> </el-table-column> <template slot-scope="scope"> <div v-if="item.scope === true"> <div v-if="scope.row[item.prop] == ''"> {{ scope.row[item.prop] }} </div> <div v-else-if="scope.row[item.prop] < '0'" style="color: red"> {{ scope.row[item.prop] }} </div> <div v-else-if="scope.row[item.prop] > '0'"> {{ scope.row[item.prop] }} </div> </div> <div v-else>{{ scope.row[item.prop] }}</div> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { // 單表頭 是否對該列進行資料比較,靠scope來判斷。 tableHead: [{ key: '1',sortable: true },{ key: '2',sortable: false },{ key: '3',widthlLocJyHQ: '100',propChildren: [{ key: '31',sortable: true },{ key: '32',] },{ key: '4',{ key: '5',sortable: false } ],// 資料 tableData: [{ date: '2016-05-02',name: '王小虎',HB: '-1.1',TB: '2.5',price: '2982.01',address: '上海市普陀區金沙江路上海市普陀區金沙江路上海市普陀區金沙江路上海市普陀區金沙江路上海市普陀區金沙江路 1518 弄' },{ date: '2016-05-04',HB: '-0.28',TB: '1.1',address: '上海市普陀區金沙江路 1517 弄' },{ date: '2016-05-01',HB: '28',TB: '-0.11',address: '上海市普陀區金沙江路 1519 弄' },{ date: '2016-05-03',name: '張三',HB: '21',TB: '2.11',price: '-201.02',address: '上海市普陀區金沙江路 1516 弄' },{ date: '2016-05-11',name: www.cppcns.com'張三',HB: '0.28',TB: '-1.1',{ date: '2016-05-02',HB: '-0.18',TB: '-1.15',HB: '-1.01',HB: '-28',HB: '',TB: '0.1',price: '-200.01',HB: '18',TB: '-0.81',address: '上海市普陀區金沙江路 1516 弄' }],} },methods: { indexMethod(index) { return index + 1; } } } </script>
到此這篇關於 + element動態多表頭與動態插槽的文章就介紹到這了,更多相關vue + element動態多表頭與動態插槽內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!