一个简介的增删改||排序

	<el-table
			:cell-style="{ textAlign: 'center' }"
			:header-cell-style="{ textAlign: 'center', background: '#f2f2f2' }"
			stripe
			:border="true"
			:align="'center'"
			style="width: 100%"
			empty-text="暂无数据"
			max-height="550px"
			:data="tableTeachers"
		>
			<el-table-column label="序号" width="60" type="index" />
			<el-table-column label="姓名" width="130">
				<template #default="scope">
					<div class="picked-teachers">
						<div v-if="scope.row.t_name">{{ scope.row.t_name }}</div>
						<el-button type="primary" size="small" @click="handlePickTeacher(scope.$index, scope.row)">
							{{ scope.row.t_name ? '重新选择' : '选择老师' }}
						</el-button>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="image" label="照片">
				<template #default="scope">
					<div class="demo-image">
						<el-upload
							class="avatar-uploader"
							:action="action"
							:data="myHeaders"
							:show-file-list="false"
							:on-success="(response, file, fileList) => handleAvatarSuccess(response, file, fileList, scope.$index)"
							:before-upload="beforeAvatarUpload"
						>
							<img v-if="scope.row.image" :src="scope.row.image" class="avatar" />
							<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
						</el-upload>
						<span v-if="!scope.row.image" class="demonstration">上传照片</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="introduce" width="500" label="简介">
				<template #default="scope">
					<el-input
						v-model="scope.row.content"
						:maxlength="500"
						:autosize="{ minRows: 6, maxRows: 16 }"
						type="textarea"
						show-word-limit
						placeholder="(内容不超过500字)"
					/>
				</template>
			</el-table-column>

			<el-table-column prop="" label="排序" width="300">
				<template #default="scope">
					<img style="padding: 0 10px" src="./image/top.png" :disable="scope.row == 0" @click="hanleUp(scope.row, scope.$index)" />
					<img style="padding: 0 10px" src="./image/up.png" :disable="scope.row == 0" @click="handleTop(scope.row, scope.$index)" />
					<img
						style="padding: 0 10px"
						src="./image/down.png"
						:disable="scope.$index + 1 == tableTeachers.length"
						@click="handleDown(scope.row, scope.$index)"
					/>
					<img
						style="padding: 0 10px"
						src="./image/bottom.png"
						:disable="scope.$index == tableTeachers.length"
						@click="handleLow(scope.row, scope.$index)"
					/>
				</template>
			</el-table-column>
			<el-table-column prop="" label="删除" width="150">
				<template #default="scope">
					<el-icon :size="30" @click.prevent="deleteRow(scope.row, scope.$index)">
						<Delete />
					</el-icon>
				</template>
			</el-table-column>
		</el-table>

是添加名字,照片,简介,然后就是排序的选择和删除操作

 点击修改可以把后台的数据获取并显示,然后进行修改删除,并且可以添加新的数据的操作

主要就是修改的操作,直接上代码

const tableTeachers = ref([...JSON.parse(JSON.stringify(props.getData))])
const setFamousTeacherIntroduces = async () => {
	let oldData = props.getData
	let newData = tableTeachers.value
	let introduce = []
	let params = {
		change_type: 1, //类型:1:添加;2:修改,3:删除
		introduce: introduce,
	}
	if (JSON.stringify(oldData) !== JSON.stringify(newData) && oldData.length == newData.length) {
		params.change_type = 2
		AddTeacher()
	}
	if (JSON.stringify(oldData) !== JSON.stringify(newData) && oldData.length > newData.length) {
		params.change_type = 3
		AddTeacher()
	}
	if (JSON.stringify(oldData) !== JSON.stringify(newData) && oldData.length < newData.length) {
		params.change_type = 1
		AddTeacher()
	}
	console.log(params.change_type)
}

const AddTeacher = async () => {
	let params = {
		change_type: 1, //类型:1:添加;2:修改,3:删除
		introduce: tableTeachers.value,
	}
	let res = await setFamousTeacherIntroduce(params)
	if (res.code == 0) {
		emits('reflash')
		emits('update:modelValue', false)
		ElMessage.success(res.message)
	} else {
		ElMessage.error(res.message)
	}
}

 然后就是照片上传 用的是element UI的组件

//上传照片
const imageUrl = ref('')
const myHeaders = {
	// PHPSESSID: document.cookie.match(`[;\s+]?PHPSESSID=([^;]*)`)?.pop(),
	// sign: '1',
	PHPSESSID: 'l66b256rqek35b6ogd9dkkvgg3',
	sign: 'l66b256rqek35b6ogd9dkkvgg3',
} //获取Token
// "http://ht.xbkids.cn/api/"是连的本地环境，'file': 'guidance/set/upload/teacher/head'是 上传图片的接口
const action = ref('http://ht.xbkids.cn/api/' + 'guidance/set/upload/teacher/head')
const handleAvatarSuccess = (res, file, fileList, index) => {
	// console.log(index)
	imageUrl.value = URL.createObjectURL(file.raw)
	tableTeachers.value[index].image = imageUrl.value
}

//上传校验
const beforeAvatarUpload = (file) => {
	const isJPG = file.type === 'image/png' || 'image/jpg' || 'image/jpeg'
	const isLt4M = file.size / 1024 / 1024 < 4
	if (!isJPG) {
		this.$message.error('上传头像图片只能是 JPG/PNG/JPEG 格式!')
	}
	if (!isLt4M) {
		this.$message.error('上传头像图片大小不能超过4MB!')
	}
	return isJPG && isLt4M
}