|
|
@@ -0,0 +1,116 @@
|
|
|
+<template>
|
|
|
+ <div class="bs-table" :style="{height:height?height:'calc(100vh - 330px)'}">
|
|
|
+ <el-table :data="data" border stripe ref="tables" :row-class-name="tableClassName" :header-cell-style="{background:'#fafafafa',height:'40px','color':'#000000'}" highlight-current-row size="mini" @row-click="rowClick" height="100%" style="width:100%;" @selection-change="handleSelectionChange" >
|
|
|
+ <!-- <div slot="empty">
|
|
|
+ <el-empty :image="require('../../../assets/empty.svg')" :image-size="250">
|
|
|
+ </el-empty>
|
|
|
+ </div> -->
|
|
|
+ <el-table-column
|
|
|
+ type="selection"
|
|
|
+ width="45"
|
|
|
+ align="center"
|
|
|
+ @handleSelectionChange="handleSelectionChange">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column show-overflow-tooltip v-for="(col) in layout" :key="col.tablecolid" :prop="col.columnname" :label="col.title" :min-width="col.width === 0 ? 150 : col.width" :fixed="checkFixed(col.columnname)">
|
|
|
+ <template slot-scope="scope">
|
|
|
+
|
|
|
+ <slot v-if="col.columnname !== 'operation'" name="customcol" :column="{data:scope.row,columnname:col.columnname}"></slot>
|
|
|
+
|
|
|
+ <slot v-if="col.columnname === 'operation'" name="opreation" :data="scope.row"></slot>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {mapGetters} from "vuex"
|
|
|
+export default {
|
|
|
+ /*
|
|
|
+ layout:表结构数据;
|
|
|
+ data:表渲染数据;
|
|
|
+ custom:是否启用自定义结构;
|
|
|
+ opwidth:操作列宽度
|
|
|
+ */
|
|
|
+ props:['data','tableName','custom','layout','fixRightData','fixLeftData','height'],
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ listData:[],
|
|
|
+ act_column:'',
|
|
|
+ value:'',
|
|
|
+ show:false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ ...mapGetters({
|
|
|
+ loading:'loading'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ tableName () {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.tables.doLayout()
|
|
|
+ });
|
|
|
+ },
|
|
|
+ data(val){
|
|
|
+ console.log(val,'输出表格数据')
|
|
|
+ this.listData = val
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ rowClick (row) {
|
|
|
+ this.$emit('rowClick',row)
|
|
|
+ },
|
|
|
+ tableClassName ({row,rowIndex}) {
|
|
|
+ row.index = rowIndex
|
|
|
+ },
|
|
|
+ handleSelectionChange(val) {
|
|
|
+ this.$emit('checkboxCallBack',val)
|
|
|
+ },
|
|
|
+ checkFixed (columnname) {
|
|
|
+ let isRight = this.fixRightData.some(item=>item === columnname)
|
|
|
+ let isLeft = this.fixLeftData.some(item=>item === columnname)
|
|
|
+ if (isRight) return 'right'
|
|
|
+ if (isLeft) return 'left'
|
|
|
+ },
|
|
|
+ headerSearch (columnname) {
|
|
|
+ this.show = false
|
|
|
+ this.$emit('headerSearch',columnname,this.value)
|
|
|
+ },
|
|
|
+ inputChange (val) {
|
|
|
+ this.value = val
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+/* .bs-table .el-table {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+} */
|
|
|
+</style>
|
|
|
+<style scoped>
|
|
|
+.search-icon:hover{
|
|
|
+ font-weight: bold;
|
|
|
+ background: #f1f2f3;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.ellipsis {
|
|
|
+ display:-webkit-box;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ overflow:hidden;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient:vertical;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.el-table--mini .el-table__cell {
|
|
|
+ padding: 0 !important;
|
|
|
+}
|
|
|
+/deep/.el-table .el-table__cell {
|
|
|
+ padding: 0 !important;
|
|
|
+}
|
|
|
+</style>
|