- 博客(250)
- 资源 (5)
- 收藏
- 关注
原创 X6节点如何根据内容自适应高度
当我使用这种方法时,是因为在没有找到其他解决方案的情况下,不得不采取这种方式。如果您有更有效的方法,请告诉我如何改进。使用的方法是,把内容放入一个类似的div容器中,计算出div的宽度和高度,再给这个节点的宽度和高度重新赋值。
2024-08-01 16:12:58
944
原创 vue中编辑器无法识别自定义指令
然后再package.json 中添加如下内容(和name平级)在根目录新建web-types.json,添加下列内容。
2024-06-01 14:01:04
602
原创 vue3+ts+element-plus 标签红色波浪形(属性不全)
在 TypeScript 中,使用 typeof 关键字可以用来获取一个值的类型。在这个特定的声明文件中,typeof ElButton 的作用是告诉 TypeScript 编译器,ElButton 的类型应该被认为是和 element-plus 库中的实际 ElButton 类型相同。这样做的好处在于,当您在编写代码时使用了 element-plus 中的 ElButton 组件,TypeScript 将能够正确地进行类型检查和推断,以及提供相关的类型提示。
2024-06-01 12:31:37
444
原创 Vue3 + TS + Element-Plus 封装的 Dialog 弹窗组件
弹窗组件中自定义了表头增加了全屏,svg-icon 没有的话可能会报错,换成自己的图标就可以。
2024-04-30 10:40:48
1588
原创 Vue3 + TS + Element-Plus 封装的 Table 表格组件
代码中主要增加了3个插槽,operationsStart 从操作栏开头增加按钮,operationsStart 从操作栏结尾增加按钮,还有一个插槽用来自定义列的内容,就是 TableModel里面的Key。
2024-04-30 09:57:11
1454
原创 vue3 Element-Plus Table 表格 flex 布局下宽度不能自适应的解决方法
主要就是给 el-table 添加了一个 div,让这个 div 的 flex 为1,overflow 为 hidden。
2024-04-26 15:57:03
1202
4
原创 Vue3报错 Vue: Cannot find module @/views/demoItem.vue or its corresponding type decla
这是因为ts只能解析 .ts 文件,无法解析 .vue文件,在env.d.ts中增加如下代码就可以了。
2024-04-17 09:29:58
952
原创 TailwindCss在vue3项目中的使用
如果你介意 tailwind.config.js 的文件是 js,那么直接改为 ts 之后换成以下代码。注意postcss.config.js 不能改成 ts。4 在src 目录下创建目录styles,并在该目录下创建Tailwind.css,用 @tailwind 指令添加 Tailwind功能。3 在tailwind.config.js添加对vue文件的识别,其他配置可以在。6 在main.ts 中引入Tailwind.css。1 安装 tailwindcss和postcss。
2024-04-16 17:05:02
1533
1
原创 Python 入门基础
Python 中的 input 语句,获取键盘的输入信息。continue 结束本次循环,继续执行下一次循环。字符串定义的三种方式,type 用了检测数据类型。语法:[元素,元素,…if elif else 多条件判断语句的使用。Python中的range()语句的基本使用。Python for循环临时变量的作用域。函数使用的时候,定义的变量作用域。tuple 元祖的常用方法演示。Python 中的各类运算符。if else的组合判断语句。while语句的基本格式应用。tuple元组的定义和操作。
2022-11-15 11:23:51
732
原创 Vue Element 表格实现拖拽排序
1、安装sortablejs2、在需要的页面引入3、具体使用,注意的是element table务必指定row-key,且row-key必须是唯一的,如 id,不然会出现排序不对的情况
2022-06-28 16:09:43
4864
原创 Element Tree 点击节点获取所有的父节点
基础布局,添加 @node-click=“handleNodeClick”<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>handleNodeClick(node) { // 最终的数据 this.breadList = [] // 获取点击当节点的dom的信息 let selectNode = this.$refs.tree.getNode
2022-05-12 16:31:50
4887
3
原创 Element 表格内的 Popover 弹出框可以任意拖动位置
在Element 表格内的 Popover 弹出框,实现可以任意拖动位置,主要参数 trigger=“manual” 为了实现点击空白处不能隐藏,popper-class 动态添加 calss,ref 定义 ref 控制 Popover 显示隐藏<el-table-column prop="pageName" label="来源" header-align="center" align="left" show-overflow-tooltip width="160"> <tem
2022-03-21 12:05:02
2206
原创 Vue 如何继承一个组件
以 Element UI 中的 el-table-column 举例,创建 js 文件,引入 Element,使用 extends 继承import { TableColumn } from 'element-ui';export default { name: 'TableColumn', extends: TableColumn};
2022-03-11 15:51:52
2655
原创 Element 树表格有无子节点内容都对齐
添加 :cell-style=“cellStyle” 方法<el-table :cell-style="cellStyle" v-sticky="{top:56}" :indent='indents' :key="Math.random()" row-key="LAND_LIST_ID" :expand-row-keys="expand" :tree-props="{children: 'children'}" :data="tableData" border stripe size="small"
2022-03-09 15:52:39
773
原创 Vue 把Llist 数据转化为 Tree 数据
创建 js 文件treeList,添加以下方法/** * 将 list 数组转化为 treeList * @param {Array} dataList list数据 * @param {string} id 节点key值 * @param {string} pId 父节点key值 * @returns {Array} treeList */export const listToTree = (dataList, id, pId) => { const data = JSON.
2022-03-07 10:18:49
1445
原创 vue 中使用海康威视视频插件
创建容器<template> <div class="right" ref="playWndBox"> <!-- 视频数据站位 --> <div id="playWnd" class="playWnd" :style="{height: playWndHeight + 'px',width: playWndWidth + 'px'}"></div> </div></template>插件所需
2022-02-24 11:10:34
7544
8
原创 List 数据处理为 Tree 数据(动态表单)
第一步把 Tree 数据的顶级数据先找出来,参数 data 就是 List 数据inputTree1(data) { data.forEach((item,index) => { if (item.fields.SUPER_ID === '-1') { item.fields.children = [] // this.data 就是tree数据,初始为空数组 this.data.push(item.fields) this.inputTr
2022-02-22 14:02:00
286
原创 vue 和风天气
在和风天气插件注册自己的插件,复制以下代码,更改 key 为自己的 key,更改 script 的 src 为自己的script<template> <div class="nav-header-wrapper"> <div id="he-plugin-simple"></div> </div></template><script>export default { name: "weather"
2022-02-15 11:48:21
989
原创 Echarts name 位置调整
yAxis: { type: 'value', name:'数量', nameTextStyle:{ fontSize: 12, color:'#999999', // name 位置 padding: [0, 0, 0, 0] },},
2022-02-15 11:45:04
1836
原创 Element 标签页样式修改
/deep/ .el-tabs__nav-wrap::after { height: 1px;}/deep/ .el-tabs__item { height: 50px; font-size: 16px; font-family: PingFang SC; font-weight: 400; color: #727171;}/deep/ .el-tabs__item:hover{ color: #C8291C;}/deep/ .el-tabs__item.is-act
2022-01-13 17:15:59
716
原创 Html 实现倒计时
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title倒计时title> <style> input { width: 40px; height: 20px; } #remainTime{
2022-01-11 10:01:50
10414
2
原创 Vue实现下拉表格组件
<template> <div> <div class="select-table"> <el-form ref="verification" label-width="80px" :model="selectData" :rules="rules"> <el-form-item label="姓名" prop="userName"> <el-input @change="chang
2022-01-10 15:45:46
1967
原创 element-ui 解决 el-select 设置默认值后无法切换选项
原因:select已经绑定了值,render函数没有自动更新,数据刷新了但是视图没有刷新解决方法:使用this.$forceUpdate()重新render<el-select @change="selectChange" size="small" v-model="ruleForm.periods" placeholder="请选择评定期数"> <el-option v-for="item in options" :key="item.id" :label
2021-12-27 16:42:29
897
原创 Vue 日期运算(计算时间差)
// 计算时间差dateDiff(date1,date2) { let date1Str = date1.split("-");//将日期字符串分隔为数组,数组元素分别为年.月.日 //根据年 . 月 . 日的值创建Date对象 let date1Obj = new Date(date1Str[0],(date1Str[1]-1),date1Str[2]); let date2Str = date2.split("-"); let date2Obj = new Date(date2St
2021-12-22 11:21:44
5847
1
原创 Element 表头换行方法
添加 width 使表头达到换行的宽度<el-table-column width="80px" :label="'计划投资\n(万元)'" align="center" show-overflow-tooltip></el-table-column>
2021-12-14 15:48:50
1256
原创 Echarts 每个柱子设置不同的
<div ref="rightChart" style="width: 100%;height:260px;"></div>rightOptionBar() { // 通过id获取获取画布 const myChart = echarts.init(this.$refs.rightChart,null,{devicePixelRatio: 2}); // 指定图表的配置项和数据 let option = { grid.
2021-12-06 15:43:41
1341
原创 Vue 中使用 moment 转换日期和时间
安装npm install moment在 main.js 全局引入import moment from 'moment'Vue.prototype.$moment = moment常用时间格式 今天为 2021-12-1// 时间戳转时间 2021-12-01this.$moment(1638336553801).format('YYYY-MM-DD')// 时间转时间戳this.$moment(new Date()).valueOf()// 获取今天 2021-12-1th
2021-12-01 13:31:45
2086
原创 React 组件的生命周期
创建(挂载阶段)执行顺序:constructor() → render() → componentDidMount()钩子函数触发时机触发时机constructor创建组件时,最先执行1.初始化state;2.为事件处理程序绑定thisrender每次组件渲染都会触发渲染UI(注意:不能调用setState() )componentDidMount组件挂载(完成DOM渲染后)1.发送网络请求;2.DOM操作更新(更新阶段)执行顺序:render() →
2021-11-29 13:32:22
169
原创 React props 校验
安装 prop-typesyarn add prop-types / npm i prop-types// 导入prop-types包import PropTypes from 'prop-types'// 添加props校验App.propTypes = { colors: PropTypes.string}// 添加props默认值App.defaultProps = { colors: 3}const App = (props) => { cons
2021-11-29 13:23:33
266
原创 React 中 props 的 children 属性
children属性:表示组件标签的子节点。当组件标签有子节点时,props就会有该属性children属性与普通的props一样,值可以是任意值(文本、React元素、组件,甚至是函数)// children为文本节点const App = (props) => { console.log(props) return ( <div> <h1>组件标签的子节点:</h1> {props.children} <
2021-11-29 13:15:29
1547
原创 React Context 跨组件传递数据
Context 可以实现跨组件传递数据,Context 提供了两个组件:Provider 和 Consumer,Provider 用来提供数据,Consumer 用了 获取数据import React from 'react'import ReactDOM from 'react-dom'// 1.创建context得到两个组件const {Provider, Consumer} = React.createContext()class App extends React.Component
2021-11-29 13:10:25
351
原创 React 组件通讯的三种方式
父传子,父组件在子组件 Child 标签上绑定一个属性,属性的值为需要传递的参数,子组件通过props获取父组件传递过来的值,如果子组件是类组件,那么,props 为 this.propsimport React from 'react'import ReactDOM from 'react-dom'// 父组件class Parent extends React.Component { state = { lastName: "wang" } rende
2021-11-29 13:03:23
429
原创 React 的受控组件和非受控组件
受控组件:受到 React 控制的表单元素import React from 'react'// 1.受控组件:受到'React'控制的表单元素// HTML中表单元素是可输入的,也就是有自己可变的状态,而 React 中可变状态通常保存在 state 中,并且只能通过 setState() 方法来修改;React 将 state 与表单元素值 value 绑定到一起,由 state 的值来控制表单元素的值// 使用步骤// 1.给表单元素添加name属性,名称与state相同// 2.根据
2021-11-29 12:51:09
125
原创 React 组件
React 组件创建方式方式有两种,使用函数创建,和使用类创建。函数组件又叫做无状态组件,类组件又叫做有状态组件。函数组件没有自己的状态,只负责数据展示(静),类组件有自己的状态,负责更新UI,让页面“动起来”class App extends React.Component { // constructor() { // super() // // 初始化状态 // this.state = { // count: 0
2021-11-29 12:41:54
81
原创 JSX 的基本使用
JSX是React的核心内容。是JavaScript XML简写。优势是声明式的语法,更加直观,与HTML结构相同,降低学习成本,提高开发效率。//使用JSX创建React元素const title = ( <h1 className="title"> hello JSX! <span>这是span</span> </h1>)// 渲染react元素const root = document.getElementById('r
2021-11-29 09:39:24
390
Navicat Premium_11.1.8_po
2020-10-19
react 学习记录
2020-09-13
vuex 使用步骤代码
2020-09-08
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人