导师 table 列空白问题处理

src/components/cuTable/index4mentor.vue

+
+<!-- 
+/**
+  * 表单通用组件
+  *	@example1: 
+		1, 引入
+			import cuTable from '@/components/cuTable';
+
+		2, 注册
+			export default {
+				components: {
+					cuTable
+				},
+				data() {
+					return {
+						Dict:{selectList:[]},
+						table:{
+							page: 1,
+							size: 10,
+							total: 0,
+							loading: false,
+							dataList:[],
+						},
+						rules: {},
+					}
+				},
+				mounted(){
+					// 获取基本信息
+					this.pageApi = Config.getModuleInfo(this);
+					this.Dict = this.pageApi.Dict;
+					this.form.config = this.pageApi.config;
+					this.rules = reqApi.getRules(this.Dict.baseInfo) || (this.Dict.rules || {});
+				},
+				methods: {
+					loadData(searchItem) {
+						var that = this;
+						//reqApi.common.getRequst.call(this, searchItem);
+					},
+				}
+			}
+		
+		3, 创建
+			<cu-table
+				ref="cuTable" 
+				:table="table"
+				:Dict="Dict"
+				:config="form.config"
+			/>
+
+		#4, 使用
+  * @author: Kimber
+  * @updatetime: 2022/5/13(周五)
+  * @createtime: 2021/12/09
+  */
+-->
+<template>
+	<div class="content cu-table">
+		<el-table :data="table.dataList" v-loading="table.loading" border style="width:auto" :row-class-name="tableRowClassName">
+			<template v-for="(item, key) in Dict.baseInfo" v-if="item.table !== 0  && item.showYN !==false"">
+				<el-table-column v-if="item.type === 'select'" :prop="key" :label="item.name">
+					<template slot-scope="scope">
+						<template v-for="sitem in Dict.selectList[key]">
+							<template v-if="typeof scope.row[key] === 'object'">
+								<span v-for="val in scope.row[key]" v-if="val===sitem[item.val||'value']">
+									{{sitem[item.key||'name']}}， 
+								</span>
+							</template>
+							<span v-else-if="sitem[item.val||'value']===scope.row[key]" class="orange" :style="'color:'+(sitem.color||'')+';'">
+								<i v-if="item.icon" :class="item.icon" style="font-size:16px;"></i>{{sitem[item.key||'name']}}
+							</span>
+						</template>
+					</template>
+				</el-table-column>
+				<el-table-column v-else-if="item.type === 'img'" :prop="key" :label="item.name" width="150px">
+					<img slot-scope="scope" :src="item.src ? item.src.call(_self, scope.row, key) :scope.row[key]" style="width:100%;border:0;height:auto;" @click="item.click ? item.click(scope.row[key]) :function(){}"/>
+				</el-table-column>
+				<el-table-column v-else-if="item.type === 'tableFormat'" :prop="key" :label="item.name">
+					<template slot-scope="scope">{{item.tableFormat.call(scope.row, scope.row[key])}}</template>
+				</el-table-column>
+				<el-table-column v-else-if="item.type === 'button'" :prop="key" :label="item.name" :align="item.align">
+					<el-button size="mini" slot-scope="scope" :type="item.btnType" :icon="item.icon" @click="item.click.call(_self, scope.row[key])">{{item.name}}</el-button>
+				</el-table-column>
+				<el-table-column v-else :prop="key" :label="item.name"></el-table-column>
+			</template>
+			<el-table-column v-if="config.buttons && config.buttons[0]" label="操作" :width="(config.operWidth || 180)+'px'" align="center" fixed="right">
+				<template slot-scope="scope" class="oper">
+					<el-button v-for="(bitem, i) in config.buttons" size="mini" :type="bitem.type" :icon="bitem.icon" :disabled="bitem.isvalid && (typeof bitem.isvalid==='function'?bitem.isvalid(scope.row):!scope.row[bitem.isvalid])" @click="bitem.callback ? bitem.callback.call(_self, scope.row, $event) : btnClick(scope.row, bitem.fn)">{{bitem.name}}</el-button>
+				</template>
+			</el-table-column>
+		</el-table>
+		<!--分页组件-->
+		<el-pagination v-if="config.pagination!==false" :total="table.total" :current-page="table.page" style="margin-top:8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
+	</div>
+</template>
+<script>
+var watchParams = {};
+
+export default {
+	data() {
+		return {
+			loading: false,
+		}
+	},
+	props:{
+		table: {
+			type: Object,
+			default: {},
+		},
+		Dict: {
+			type: Object,
+			default: {},
+		},
+		config: {
+			type: Object,
+			default: {},
+		},
+		loadData:{
+			type: Function,
+			default: () => {}
+		},
+	},
+	beforeCreate(){
+	},
+	created(){
+	},
+	mounted() {
+	},
+	/* watch:{
+		'form.item.paperfilename':{
+			immediate:true,
+			handler(aa){
+				this.form.item.paperfilename = aa;
+			},
+		},
+	}, */
+	methods: {
+		tableRowClassName({row, rowIndex}) {
+			if (rowIndex === 1) {
+				return 'warning-row';
+			} else if (rowIndex === 3) {
+				return 'success-row';
+			}return '';
+		},
+		pageChange(e) {
+			this.table.page = e
+			this.loadData()
+		},
+		sizeChange(e) {
+			this.table.page = 1
+			this.table.size = e
+			this.loadData()
+		},
+		btnClick(row, fnName){
+			new Function('this.$parent.'+fnName+'('+JSON.stringify(row)+')').call(this);
+		},
+	},
+}
+</script>
+<style lang="scss" scope>
+	.cu-table{
+		.el-table{
+			font-size:14px;
+			thead{
+				th{color:#666;background-color:#f8f8f8;}
+			}
+			tbody{color:#777;}
+		}
+		.content-between{
+			padding-right:10px;height:40px;line-height:40px;
+			.r-btn{padding:5px 10px;border:1px solid #58ACFF;border-radius:5px;}
+		}
+		.el-button{
+			margin-left:5px;margin-top:4px;
+			span{margin-left:1px;}
+		}
+	}
+</style>
\ No newline at end of file

src/views/business/common/index.vue

@@ -54,7 +54,7 @@ import { Tools } from '@/assets/js/common.js';
 import DateRangePicker from '@/components/DateRangePicker';
 import TableFilter from '@/components/TableFilter/index2';
 import cuForm from '@/components/cuForm/index2';
-import cuTable from '@/components/cuTable/index2';
+import cuTable from '@/components/cuTable/index4mentor';
 
 export default {
 	name: 'Dashboard',