|
|
@@ -0,0 +1,73 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <!-- :header-cell-style="{background:'#EEEEEE',color:'#333'}" -->
|
|
|
+ <el-table ref="table" :row-class-name="tableClassName" highlight-current-row :data="data" size="mini" :height="height ==''?data.length <= 4?'260px':data.length <= 20?'calc(100vh - 830px)':'calc(100vh - 830px)':height" @row-click="rowClick"
|
|
|
+ style="width:100%;" :header-cell-style="{height:'40px',color:'#606266',fontWeight:'400',fontSize:'14px'}" tooltip-effect="dark"
|
|
|
+ :cell-style="{height:'40px',color:'#666666',fontWeight:'400'}" border @selection-change="selectionChange" >
|
|
|
+ <el-table-column
|
|
|
+ type="selection"
|
|
|
+ width="35" fixed v-if="checkbox">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column v-for="col in layout" :key="col.tablecolid" :prop="col.columnname" :label="col.title" :width="col.width" :fixed="fixedName ? fixedName.indexOf(col.columnname)!= -1?'right':false : false">
|
|
|
+ <template :slot="headerOptions ? headerOptions.includes(col.columnname) ? 'header' : '' : ''" slot-scope="scope">
|
|
|
+ <slot name="header" :column="{data:scope.row,columnname:col.columnname}"></slot>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="table-panel">
|
|
|
+ <!-- 自定义表格显示内容 -->
|
|
|
+ <slot v-if="custom" name="customcol" :column="{data:scope.row,columnname:col.columnname}"></slot>
|
|
|
+ <!-- 否则就是默认 -->
|
|
|
+ <span v-else>{{scope.row[col.columnname]}}</span>
|
|
|
+ <!-- 操作结构内容 -->
|
|
|
+ <slot v-if="col.columnname === 'operation'" name="opreation" :data="scope.row"></slot>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {mapGetters} from "vuex"
|
|
|
+export default {
|
|
|
+ /*
|
|
|
+ layout:表结构数据;
|
|
|
+ data:表渲染数据;
|
|
|
+ custom:是否启用自定义结构;
|
|
|
+ opwidth:操作列宽度
|
|
|
+ */
|
|
|
+ props:['layout','data','custom','height','fixedName','width','checkbox','headerOptions'],
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ list:[],
|
|
|
+ allArr:[],
|
|
|
+ loading:false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /*computed:{
|
|
|
+ ...mapGetters({
|
|
|
+ loading:'loading'
|
|
|
+ })
|
|
|
+ },*/
|
|
|
+ methods:{
|
|
|
+ rowClick (row) {
|
|
|
+ this.$emit('rowClick',row)
|
|
|
+ },
|
|
|
+ tableClassName ({row,rowIndex}) {
|
|
|
+ row.index = rowIndex
|
|
|
+ },
|
|
|
+ selectionChange(row){
|
|
|
+ this.allArr = row
|
|
|
+ this.$emit('selectionChange',row)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+.el-tooltip__popper {
|
|
|
+ max-width: 90%;
|
|
|
+}
|
|
|
+</style>
|
qymljy