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

<template>
	<div @click="handleClick(row, item.options)" style="cursor: pointer; ">
		<x-avatar v-if="item.columntype=='avatar' || item.component=='avatar'" :name="item.name" :options="item.options" v-model="row"></x-avatar>
		<el-badge v-else-if="item.columntype=='badge'" :value="row[item.name]"  :type="item.options.type || 'warning'"></el-badge>
		<span style="border: none; background: none;" v-else-if="item.columntype=='tag'" v-time.tip="row[item.name]"></span>
		<el-badge v-else-if="item.columntype=='imagegroup'" :value="row[item.name].length"  :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="width: 30px; height: 30px" fit="cover" :src="getImg(row[item.name])">
			<template #error>
	          	<div class="image-slot">
	          		无图
	          	</div>
	        </template>
		</el-image>
		<p v-else-if="item.columntype=='status'">
			<x-status-indicator v-for="op in item.options.items" :key="op.value" pulse :type="op.type || 'success'" :label="op.label" v-show="op.value==row[item.name]">
			</x-status-indicator>
		</p>
		<p v-else-if="item.columntype=='input'">
			<input class="el-input__inner" type="text" readonly :value="row[item.name]">
		</p>
		<p v-else-if="item.columntype=='button' && item.options.items && item.options.items.length>0">
			<el-button v-for="op in item.options.items" :key="op.value" :type="op.type || 'warning'" style="margin: 0;" :size="op.size || 'small'" :icon="op.icon" v-show="op.value==row[item.name]">
				{{ op.label }}
			</el-button>
		</p>
		<p v-else-if="item.columntype=='button'">
			<el-button :type="item.options.type || 'warning'" :size="item.options.size || 'small'" :icon="item.options.icon">
				{{ row[item.name] }}
			</el-button>
		</p>
		<slot v-else-if="item.columntype=='select'" :name="item.name" v-bind="scope"> 
			<p style="overflow:hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow:ellipsis;" :title="row[item.name]">
				{{ getNameByValue( row[item.name],  item.options.items) }}
			</p>
		</slot>
		<slot v-else :name="item.name" v-bind="scope">
			{{row[item.name]}}
		</slot>
	</div>
</template>
<script>

	export default {
		name: 'xTablecolumnitem',
		props: {
			item: { type: Object, default: () => {} },
			modelValue: { type: Array, default: () => [] },
		},
		watch: {

		},
		computed: {
		},
		data() {
			return {
				row : this.modelValue,
			}
		},
		mounted() {

		},
		methods: {
			handleClick(row, options){
				if (options && options.updataname) {
					this.$emit('xtableupdate', row, {name:options.updataname, remoteurl:'system/table/getUpdate?name='+options.updataname});
				}
			},
			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>