monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit d5cf8b680d61b15371353a39096c9668a4e6d1af 1 parent 61a11e34

【无】表格组件更改为可以多级表头

Inline Side-by-side
Showing 1 changed file with 32 additions and 1 deletions
@@ -23,7 +23,7 @@ @@ -23,7 +23,7 @@
23 :sortable="item.sortable == undefined ? false : item.sortable" 23 :sortable="item.sortable == undefined ? false : item.sortable"
24 :width="getWidth(item.width)" 24 :width="getWidth(item.width)"
25 v-for="item in columns"> 25 v-for="item in columns">
26 - <template #default="scope"> 26 + <template v-if="!item.columns || item.columns.lendth==0" #default="scope">
27 <slot :column="item" :prop="item.prop" :row="scope.row"> 27 <slot :column="item" :prop="item.prop" :row="scope.row">
28 <div v-if="typeof(item.click) == 'function' && typeof(item.render) == 'function'"> 28 <div v-if="typeof(item.click) == 'function' && typeof(item.render) == 'function'">
29 <span @click="item.click(scope.row)" style="cursor: pointer" 29 <span @click="item.click(scope.row)" style="cursor: pointer"
@@ -49,6 +49,37 @@ @@ -49,6 +49,37 @@
49 </span> 49 </span>
50 </slot> 50 </slot>
51 </template> 51 </template>
  52 + <el-table-column v-else :align="columnItem.align == undefined ? 'center' : columnItem.align " :label="columnItem.label" :prop="columnItem.prop"
  53 + :sortable="columnItem.sortable == undefined ? false : columnItem.sortable"
  54 + :width="getWidth(columnItem.width)"
  55 + v-for="columnItem in item.columns">
  56 + <template #default="scope">
  57 + <slot :column="columnItem" :prop="columnItem.prop" :row="scope.row">
  58 + <div v-if="typeof(columnItem.click) == 'function' && typeof(columnItem.render) == 'function'">
  59 + <span @click="columnItem.click(scope.row)" style="cursor: pointer"
  60 + v-html="columnItem.render(scope.row)"></span>
  61 + </div>
  62 + <div v-else-if="typeof(columnItem.click) == 'function'">
  63 + <span @click="columnItem.click(scope.row)" style="cursor: pointer"> {{scope.row[columnItem.prop]}}</span>
  64 + </div>
  65 + <div v-else-if="typeof(columnItem.render) == 'function'">
  66 + <span v-html="columnItem.render(scope.row)">{{scope.row[columnItem.prop]}}</span>
  67 + </div>
  68 +
  69 + <span v-else>
  70 + <el-tooltip placement="top">
  71 + <template #content>
  72 + <div v-html="getTextContent(scope.row[columnItem.prop])">
  73 + </div>
  74 + </template>
  75 + <div style="overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">
  76 + {{scope.row[columnItem.prop]}}
  77 + </div>
  78 + </el-tooltip>
  79 + </span>
  80 + </slot>
  81 + </template>
  82 + </el-table-column>
52 </el-table-column> 83 </el-table-column>
53 84
54 <el-table-column align="center" label="操作" v-if="showTools && columns.length > 0" width="80"> 85 <el-table-column align="center" label="操作" v-if="showTools && columns.length > 0" width="80">