vue+element tree组件 回显数据时有一个父节点数据下面子节点都会被选中

当el-tree 从后台拿到数据动态展示出来时,会出现一个父节点下面的所有子节点全部被勾选了
在这里插入图片描述
解决方法代码如下:

<el-tree
	:data="data"
	show-checkbox
	node-key="id"
	ref="tree"
	:check-strictly="isCheck"
	:expand-on-click-node="false"
	:props="defaultProps">
</el-tree>

1.先设置check-strictly 是一个变量isCheck默认值是false
2.拿到接口数据后:

  this.isCheck= true  //重点:给数节点赋值之前 先设置为true
  this.$nextTick(() => {
        //因为我是根据数据id来判断选中所以使用setCheckedKeys,具体可以查看element官网api
        this.$refs.tree.setCheckedKeys(这里写接口获取的数据) //给树节点赋值
        this.isCheck= false //重点: 赋值完成后 设置为false
  })

这样就可以解决问题了

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
下面一个简单的示例,展示如何使用Vue和Spring Boot实现回显MySQL文件和表单数据。 1. 配置MySQL数据库连接 在Spring Boot的application.properties文件中配置MySQL数据库连接信息,例如: ``` spring.datasource.url=jdbc:mysql://localhost:3306/db_name spring.datasource.username=username spring.datasource.password=password spring.datasource.driver-class-name=com.mysql.jdbc.Driver ``` 2. 创建MySQL表 在MySQL数据库中创建一个表,用于存储文件和表单数据,例如: ``` CREATE TABLE `file_data` ( `id` int(11) NOT NULL AUTO_INCREMENT, `file_name` varchar(255) DEFAULT NULL, `file_data` longblob, `form_data` varchar(255) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; ``` 3. 编写Spring Boot后端代码 创建一个Spring Boot的RestController,用于处理HTTP请求并从MySQL数据库中检索文件和表单数据下面一个简单的示例: ``` @RestController @RequestMapping("/api") public class FileDataController { @Autowired private FileDataRepository fileDataRepository; @GetMapping("/file-data") public List<FileData> getFileData() { return fileDataRepository.findAll(); } @PostMapping("/file-data") public void saveFileData(@RequestBody FileData fileData) { fileDataRepository.save(fileData); } } ``` 4. 编写Vue前端代码 使用VueElement UI创建一个简单的表单,用于上传文件和提交表单数据下面一个简单的示例: ``` <template> <el-form :model="form" ref="form" label-width="100px"> <el-form-item label="Upload File"> <el-upload class="upload-demo" :action="uploadUrl" :on-success="handleFileUploadSuccess" :before-upload="beforeFileUpload" :show-file-list="false"> <el-button slot="trigger" size="small" type="primary">Select File</el-button> </el-upload> </el-form-item> <el-form-item label="Form Data"> <el-input v-model="form.formData"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('form')">Submit</el-button> </el-form-item> </el-form> </template> <script> import axios from 'axios' export default { data() { return { form: { formData: '', file: null }, uploadUrl: '/api/file-data' } }, methods: { beforeFileUpload(file) { this.form.file = file return true }, handleFileUploadSuccess(response) { console.log(response) }, submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { let formData = new FormData() formData.append('formData', this.form.formData) formData.append('file', this.form.file) axios.post(this.uploadUrl, formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(response => { console.log(response) }).catch(error => { console.log(error) }) } else { console.log('error submit!!') return false } }) } } } </script> ``` 5. 创建FileData实体类和Repository 创建一个FileData实体类,用于映射MySQL表中的数据。创建一个FileDataRepository,用于从MySQL数据库中检索数据下面一个简单的示例: ``` @Entity @Table(name = "file_data") public class FileData { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; @Column(name = "file_name") private String fileName; @Lob @Column(name = "file_data") private byte[] fileData; @Column(name = "form_data") private String formData; // getters and setters } @Repository public interface FileDataRepository extends JpaRepository<FileData, Long> { } ``` 以上就是一个简单的示例,展示了如何使用Vue和Spring Boot实现回显MySQL文件和表单数据的代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值