x-php-Admin/src/components/xTable/columnItem.vue

<template>
	<div>
		<x-avatar v-if="item.columntype=='avatar' || item.component=='avatar'" :name="item.name" :options="item.options" :data="row"></x-avatar>
		<el-badge v-else-if="item.columntype=='badge' || item.columntype=='imagegroup'" :value="getType(row[item.name])"  :type="item.options.type || 'warning'"></el-badge>
		<el-image v-else-if="item.columntype=='image'" :preview-src-list="[getImg(row[item.name])]" :preview-teleported="true" hide-on-click-modal="true" lazy="true" style="max-width: 60px; height: 26px; border-radius: 2px;" fit="cover" :src="getImg(row[item.name])">
			<template #error>
	          	<div class="image-slot">
	          		无图
	          	</div>
	        </template>
		</el-image>

		<input v-else-if="item.columntype=='input'" @click="handleClick(row, item)" style="cursor: pointer; " class="el-input__inner" type="text" readonly :value="row[item.name]">

		<p v-else-if="item.columntype=='status'">

			<template v-for="{ value, type = 'success', label } in item.options.items">
			    <x-status-indicator
			      :key="value"
			      pulse
			      :type="type"
			      :label="label"
			      @click="handleClick(row, item)"
			      v-if="value === row[item.name]"
			    ></x-status-indicator>
			  </template>
		</p>

		<p v-else-if="item.columntype=='button' && item.options.items && item.options.items.length>0">
			<template v-for="{ value, type = 'warning', size = 'small', label, icon, link } in item.options.items">
			  <el-button
			    @click="handleClick(row, item)"
			    :key="value"
			    :type="type"
			    style="margin: 0;"
			    :size="size"
			    :link="link"
			    :icon="icon"
			    v-if="value === row[item.name]"
			  >
			    {{ label }}
			  </el-button>
			</template>
		</p>

		<p v-else-if="item.columntype=='button'">
			<el-button @click="handleClick(row, item)" :type="item.options.type || 'warning'" :size="item.options.size || 'small'" :icon="item.options.icon">
				{{ row[item.name] }}
			</el-button>
		</p>

		<p v-else-if="item.columntype=='tag'" @click="handleClick(row, item)" v-time.tip="row[item.name]"></p>

		<slot v-else :name="item.name" v-bind="scope">
			{{ item.columntype=='select' && item.options && item.options.items ?  getNameByValue( row[item.name],  item.options.items ) : row[item.name] }}
		</slot>
	</div>
</template>
<script>

	export default {
		name: 'XTableColumnItem',
		props: {
			item: { type: Object, default: () => {} },
			row: { type: Object, default: () => {} },
		},
		methods: {
			handleClick(row, item){

				// 打开编辑层
				if (item.update && (item.update.url || item.update.name)) {
					this.$emit('xtableupdate', row, {
						name:item.update.name || item.name, 
						remoteurl: item.update.url || 'table/getUpdate?name='+item.update.name
					}, item.update.type || 'dialog', 'update');
					return ;
				}

				// 打开表格
				if (item.table && (item.table.url || item.table.name)) {
					this.$emit('xtableupdate', row, {
						name:item.table.name || item.name, 
						remoteurl: item.table.url || 'table/get?name='+item.table.name
					}, item.table.type || 'dialog', 'table');
					return ;
				}
			},
			getType(value) {
		      if (Array.isArray(value)) {
		        return value.length;
		      }
		      return value;
		    },
			getNameByValue (value, degrees) {
			    const degree = degrees.find(degree => degree.value === value);
			    return degree ? (degree.name?degree.name:degree.label) : value;
			},
			getImg(o){
				if (!o) {
					return ;
				}
				return typeof o === 'string'? o : o.url;
			},
		}
	}
</script>