使用ESlint警告：Require self-closing on Vue.js custom components (＜el-table-column＞)报错解决

最新推荐文章于 2024-05-21 20:53:37 发布
最新推荐文章于 2024-05-21 20:53:37 发布
阅读量5.9k 收藏 1
点赞数
分类专栏： 前端
原文链接：https://www.jianshu.com/p/32a2eb7bf83e
版权

解决方式：配置eslintrc.js;添加配置内容如下：

"vue/html-self-closing": ["error", {
            "html": {
                "void": "never",
                "normal": "any",
                "component": "any"
            },
            "svg": "always",
            "math": "always"
        }],

引用自

sunberryL
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
warning: Require self-closing on Vue.js custom components
郭宝的博客
05-28 1万+
错误提示： 2 warnings found. 2 warnings potentially fixable with the `--fix` option. Module Warning (from ./node_modules/eslint-loader/index.js): warning: Require self-closing on Vue.js custom component...
[报错] Require self-closing on Vue.js custom components
qq_14993591的博客
04-04 865
如果组件里没有其他组件或内容，做单标签闭合就可以了。
vue中Require self-closing on Vue.js custom components的解决方法
qq_39237850的博客
04-27 1万+
1、找到.eslintrc.js这个文件 2、然后再rules中添加如下配置 "vue/html-self-closing": ["error",{ "html": { "void": "never", "normal": "any", "component": "any" }, "svg": "always", ...
eslint规则之vue/html-self-closing
最新发布
qq_44477160的博客
05-21 220
normal 除空元素之外的元素样式。always 没有内容的自我封闭。component 组件样式。nerver 禁止使用单标签。
Require self-closing on Vue.js custom components
BIG_LEE_SHOW的博客
06-24 8799
关于eslint 的报错：Require self-closing on Vue.js custom components 如果组件里没有其他组件或内容，做单标签闭合就可以了 例如： // 有内容 <template> <div>内容</div> </template> // 无内容 <template> &lt...
【ESLINT报错】eslint/tslint常见报错集合
qq_39404437的博客
07-25 6642
eslint常见报错集合
vue-pull-refresh-Vue.js 2.0的刷新刷新组件。-Vue.js开发
05-27
演示演示PS：请使用支持Promise用法的浏览器安装npm install vue-pull-refresh --save CommonJS var VuePullRefresh = require（'vue-pull-refresh'）; 新的Vue（{组件：{'vue-pull-refresh'：VuePullRefresh}，数据...
eslint-config:使用 Vue.js 和 Typescript 和 Jest 的项目的自以为是的 eslint 配置
08-05
使用 Vue.js 和 Typescript 和 Jest 的项目的自以为是的 eslint 配置 用法 require ( '@geprog/eslint-config/patch/modern-module-resolution' ) ; module . exports = { extends : [ '@geprog' ] , parser...
vue-monaco：Vue.js的MonacoEditor组件
02-06
安装npm install vue-monaco 要么yarn add vue-monaco用法将ESM版本与Webpack一起使用使用 ： // webpack.config.jsconst MonacoEditorPlugin = require ( 'monaco-editor-webpack-plugin' )module . exports = { ...
vue-file-upload：vue.js，vue-loader上传文件，vue-file-upload，vue上传文件组件
02-06
vue-loader上传文件，vue-file-upload代码里面包含demo，运行： yarn install && yarn start安装npm npm install --save vue-file-upload普通JS var VueFileUpload = require ( 'vue-file-upload' ) ;//es6import ...
CentOS 8.0 安装docker 报错：Problem package docker-ce-3 19.03.4-3.el7.x86_64 require
01-20
文章目录CentOS 8.0 安装docker 报错：Problem: package docker-ce-3:19.03.4-3.el7.x86_64 requires containerd.io >= 1.2.2-31、错误内容2、分析原因3、解决4、检查是否安装成功 CentOS 8.0 安装docker 报错：...
滴滴前端二面高频面试题合集
aync_sync的博客
02-24 844
HTTPS通信（握手）过程 HTTPS的通信过程如下：其实看完前面的闭包、 这部分内部的话，应该基本能了解作用域的一些应用。一旦我们将这些作用域嵌套起来，就变成了另外一个重要的知识点「作用域链」，也就是 JS 到底是如何访问需要的变量或者函数的。图中的 是个数组，作用域的一层层往上寻找就等同于遍历 。1. 全局作用域 从这段代码中我们可以看到，globalName 这个变量无论在什么地方都是可以被访问到的，所以它就是全局变量。而在 getName 函数中作为局部变量的 name 变量是不具备这种能力的
使用vue.js路由踩到的一个坑Unknown custom element
zhangxuekang的博客
03-29 8万+
      在配合require.js使用vue路由的时候，遇到了路由组件报错：   “vue.js:597 [Vue warn]: Unknown custom element: &lt;router-link&gt; - did you register the component correctly? For recursive components, make sure to provid...
Require self-closing on Vue.js custom components (＜XXX＞)
weixin_45966674的博客
08-17 648
这个问题其实就比较基础了 我们通常使用子组件会像写标签一样 习惯用双标签 <setUp :datas="control" :earlyWarning="earlyWarning" @closePayment="closePayment" @configure="configure" ></setUp> 但这样就会出现 Require self-closing on Vue.js custom components () <setUp :datas="
vue.js+Element 增删改查
janessssss的博客
11-22 3万+
新项目使用的是vue.js 后来发现饿了吗前端编写的一套框架Element （http://element.eleme.io/#/zh-CN）来配合vue.js进行样式填充 之前用过angularjs 用到后来 发现越来越难学 于是就决定用vue.js 下面就介绍一下vue.js应用在表格里的增删改查 首先引入一下element的css以及js<link rel="stylesheet"
Vue.js学习笔记
tonydandelion2014的博客
07-15 3万+
绑定一个元素 双向绑定 渲染列表 处理用户输入 综合 相应数据的绑定 组件系统 构造器 实例的生命周期 数据绑定语法 插入数据值 绑定表达式 指令 计算属性绑定一个元素 <!-- 如果new Vue不写在$(document).ready(function() {}里面的话，就必须写在最后面，这样才能保证页面元素是先于js加载的。 --> <script> $(document).ready(fun
vuejs+element UI table的常见的属性及事件
热门推荐
汉堡请不要欺负面条
04-23 12万+
一.table组件的方法，事件 查看官网 二.常用的事件，属性 (一).属性 1.多选框（type = "selection"） 需要实现勾选的功能 在<el-table> 内加入<el-table-column type="selection" width="55"></el-table-column> 2. :data="tableData"......
<template> <el-table :data="tableData" style="width: 100%" stripe ref="multipleTable" @selection-change="handleSelectionChange" :header-cell-style="{background:'#eef1f6',color:'#606266'}"> <el-table-column prop="id" label="编号" sortable /> <el-table-column prop="img" label="图片url" sortable /> <el-table-column prop="img" label="缩略图"> <template v-slot="products"> <img :src="products.row.img" min-width="70" height="70"/> </template> </el-table-column> <el-table-column prop="image" label="图片" min-width="20%" > <!-- 图片的显示 --> <template #default="scope"> <!--<img :src="scope.row.img" min-width="70" height="70" />--> </template> </el-table-column> <el-table-column align="center" label="图片url"> <template v-slot="products"> <!--<img :src="require('../file/img/' + item)" v-for="item in list" :key="item" alt="">--> <el-image style="width: 100px; height: 100px" :src="products.row.img" ></el-image> <!--<img :src="require(''+products.row.img)" style=" width:100px; height:100px" />--> </template> </el-table-column> </el-table> </template> <script setup> import {ref,toRefs,reactive,onMounted,getCurrentInstance} from 'vue' let { proxy } = getCurrentInstance(); import router from '@/router' onMounted(()=>{ getTableData(); }); //获取表单信息 let tableData = ref([]); function getTableData() { proxy.$http.get('/ImgController/imgFind') .then(res => { tableData.value=res.data; console.log(res.data) }) .catch(err => { console.log(err) }); } </script> <style scoped> </style>修改以上代码，是他能够显示图片
05-25
在模板中，你已经将图片的 url 显示在表格中了，但是在显示图片时，需要注意以下几点： 1. 确定图片的 url 是否正确，可以通过控制台检查图片 url 是否可以访问。 2. 确认图片的路径是否正确，这里使用了相对路径，需要确认相对路径是否正确。 3. 确认图片是否过大，可以在 img 标签中设置 width 和 height 属性，或者使用 el-image 组件，控制图片大小。 在代码中，有三个地方需要修改： 1. 第一个 el-table-column 中，图片已经正确显示，不需要修改。 2. 第二个 el-table-column 中，需要将注释的 img 标签打开，同时添加 width 和 height 属性，用于控制图片大小。 ```html <el-table-column prop="image" label="图片" min-width="20%"> <!-- 图片的显示 --> <template #default="scope"> <img :src="scope.row.img" width="70" height="70" /> </template> </el-table-column> ``` 3. 第三个 el-table-column 中，需要使用 el-image 组件，同时设置宽度和高度。 ```html <el-table-column align="center" label="图片url"> <template v-slot="products"> <el-image style="width: 100px; height: 100px" :src="products.row.img"></el-image> </template> </el-table-column> ``` 这样就可以正确显示图片了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值