element

在项目中导入element以及sass、stylus等方便开发的工具以及UI框架 （1）如何在vue项目中导入elementUI框架 　　elementUI是饿了么团队开发出来基于vue的前端UI框架，其底层原理和bookstrap相似 　　安装 npm install element-ui -S 　　在package.json中检查是否已经装上element 　　在main.js中： import ElementUI from 'element-ui' 　　　　　　　　import 'element-ui/lib/theme-chalk/index.css' 　　　　　　　　Vue.use(ElementUI) （2）如何在vue项目中使用sass预编译 　　　安装sass:npm install --save -dev sass -loader 　　　　　　　 //sass-loader依赖于node-sass 　　　　　　 npm install --save -dev node -sass 　　　配置：在build文件夹下的webpack.base.conf.js的rules里面添加配置 　　　　　　 { 　　　　　　　　　 test: /\.sass$/, 　　　　　　　　 loaders: [ 'style', 'css', 'sass'] 　　　　　　 } 　　

首先将starrysky文件解压缩，把生成的文件夹放到项目下，如下图： starrysky目录包括.idea和starrysky_front两个目录，主要还是在starrysky_front->starrysky_v2下开始写代码，在views目录下可以看到Index.html文件，双击Index.html，用chrome浏览器打开，在elementui下可以看到test和case分别是一个导航，如下图： 在Index.html文件里可以看到test和case两个dd文件，再复制一个dd，将case文案换成mjz，如下图： 刷新星瀚页面， 在StarrySky页面elementui下可以看到多一个mjz的导航，如下图： 在starrysky_v2目录下新建一个文件，mjz.html，将Index.html代码里的case.html改成mjz.html，刷新页面看到一个空白的页面，接下来就开始开发和case一样的页面，可以利用 https://element.eleme.cn/#/zh-CN/component/installation 这个网站 首先要在mjz.html里导入样式和组件库，index.css和index.js都是在上面那个网站下载的，直接保存在starrysky_front下的js目录里，还有其它的组件库也放在js里，后面陆续导入这几个组件库，vue

在第一讲的时候，已经安装了Selenium2Library这个库，这一篇主要来整理介绍一下Selenium2Library中的常用关键字,为我们之后的web自动化打好基础 一、browserManagement 浏览器： 1.Open Browser 打开浏览器 2.Close Browser 关闭浏览器 3.Go to 转到某个URL 4.Go Back 相当于浏览器的后退 5.Switch Browser 转换浏览器 （参数是打开浏览器的index顺序或者alias别名） 6.Close All Browsers 关闭所有的浏览器 窗口： 1.Select Window 选择窗口 2.Wait Until Keyword Succeeds 等待直到关键词成功 3.Close Window 关闭窗口 4.Select Window Main 选择主窗口 针对某些模态窗口，不一定能直接选择到，通过handle去操作窗口 1.select window by handle 通过handle选择窗口 2.get window handles 获取当前线程所有窗口的handles，返回list 3.get current window handle 获取当前窗口的handle 页面采用frame或iframe 1.Select Frame 选择frame 2.Unselect Frame

1. 使用element-ui表格列表中的每一项添加下拉菜单 　　效果图一： 效果图二： 　　代码： 　　　　<el-table>　　　 　　　　　<el-table-column label="操作"> 　　　　　　 <template slot-scope="scope"> 　　　　　　　<el-dropdown trigger="click" @visible-change="handleVisibleVsim($event, scope)" > 　　　　　　　　<span class="el-dropdown-link el-button--lightblue dropbutton"> 　　　　　　　　　<i class="iconfont icon-operate" style="color: #aab4bd"></i> 　　　　　　　　</span> 　　　　　　　<!-- 下拉框里面的内容 --> 　　　　　　　<el-dropdown-menu slot="dropdown"> 　　　　　　　　<el-dropdown-item command="view_detail" @click.native="view(scope)">查看详情</el-dropdown-item> 　　　　　　　　　<el-dropdown-item command="edit"

问题：在vue项目中使用elementUI，使用日期控件的时候出现错误 而正常情况下，点击日期控件会出现以下面板： 查看代码 ：与elementUI官网中的代码一致，绑定的数据也都是data:''形式 然后又看了 控制台输出 的错误信息：堆栈溢出 网上查看这些信息都是js问题，但是vue的js和elementUI的js都是压缩版不能调试，因为vue和elementUI都是使用CDN引入的，所以猜想是否是elementUI的CDN引入文件错误，改用官网的网络链接，也没用。突发奇想将elementUI引入放到了vue前面，那更报错了。 解决方法 ：找了各种方法，所有的思路都是elementUI出错，依然没找到问题。所以又将vue的CDN引入换成了 < script src ="https://unpkg.com/vue@2.5.16/dist/vue.js" ></ script > <!-- <script src="static/lib/vue/vue.min.js"></script> --> 查看效果 发现成功了！！！ 现在 追查原因 ，是vue的CDN引入文件为vue.min.js压缩版的文件，应该使用完整版的vue.js文件。 来源： oschina 链接： https://my.oschina.net/u/4411425/blog/3986239

项目中使用到element-ui组件库，经常需要操作表格，编辑样式的过程中遇到一些问题，官网针对table给出了很多的api，自己可以自定义，基本能满足产品需求，但是没有给出具体的案例，网上的资料也比较简略，这里简单整理下一些常用的操作，如果有类似的功能可以做一个参考 具体的使用方法还是建议仔细阅读官网-table章节： https://element.eleme.cn/#/zh-CN/component/table#table-column-scoped-slot 自定义列的内容 需求：在表格最后一栏添加操作按钮 image 通过 slot-scope="scope" 添加操作按钮，这是专门为我们提供的插槽，方便自定义添加不同的内容。 <template slot-scope="scope"> <el-button size="mini" type="primary">编辑</el-button> <el-button size="mini" type="danger">删除</el-button> </template> </el-table-column> 　　 image scope.$index 获取当前行下标 添加进来的操作按钮可以通过 scope.$index 可以获取当前行对应的下标 <el-table-column label= " 操作 " width= "

ElementUI的Table表格，官方网站上提供了很多样式，但是在日常开发中还会碰到各种情况，显然官方提供的是不能满足需求的。那么，我们就根据自己的需求对table进行改造。 先丢出关于Table的官方文档的传送门，请戳这里→ <a href="http://element-cn.eleme.io/#/zh-CN/component/table" target="_blank"> http://element-cn.eleme.io/#/zh-CN/component/table </a> 官方对Table相关的Attributes介绍的不是很详细，对于不太熟悉人，很难搞明白，实际操作起来很难受。 下面就关于 Table-column 中 render-header 的运用，稍作说明，具体请移步此项目文件中查看(文章最下面有传送门)。 参数 说明 类型 可选值 默认值 render-header 列标题 Label 区域渲染使用的 Function Function(h, { column, $index }) — — 一、自定义表头样式 renderHeaderOne (h, { column, $index }) { return h('span', [ h('span', column.label), h('span', { class: 'errorIcon', on:

引入Element 因为整个项目是依赖ElementUI框架做的，所以采用了全部引入 1，在项目根目录执行命令：npm i element-ui -S进行安装 2，在main.js中引入element： import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'; Vue.use(Element) 3，在组件中直接使用 修改主题色 1，安装sass： npm install node-sass --save-dev npm install sass-loader --save-dev 2，在src文件夹下新建styles.scss文件，并填入需要修改的主题颜色： 3,修改main.js中关于element的引入 import Element from 'element-ui' import './styles.scss' Vue.use(Element) 修改element的默认样式 1，在src下的assets文件夹下的css文件夹下新建ele.css 2，正常情况下，我们组件的样式是写在<style>里面的，并且为了保证只在当前组件内使用该样式，会在style 中添加scoped。如果某个组件内使用的element组件的样式需要修改，我们需要在giant组件中林外添加<style>

修改列标题样式 1.在列标题后面加一个图标。 以element-ui官方文档一个table表格为例，我们在地址的后面加一个定位标志的图标，代码如下： <template> 　　<el- table 　　　　:data ="tableData2" 　　　　style ="width: 100%" 　　　　:row -class-name="tableRowClassName"> 　　　　<el-table- column 　　　　　　prop ="date" 　　　　　　label ="日期" 　　　　　　width ="180"> 　　　　</el-table-column> 　　　　<el-table- column 　　　　　　prop ="name" 　　　　　　label ="姓名" 　　　　　　width ="180"> 　　　　</el-table-column> 　　　　<el-table- column 　　　　　　prop ="address" 　　　　　　label ="地址" 　　　　　　:render -header="renderHeader"> // 加入render事件 　　　　</el-table-column> 　　</el-table> </template> <script> export default { 　　methods: { 　　　　

传统的接口测试，都是在接口中手动输入不同用例准备的多种场景参数数据，一遍一遍的输入来执行多个不同的用例，但是现在利用excel表格准备各种类型的数据，使用Jmeter中Jmeter CSV Data Set Config参数化实现可设置的、一次性的读取excel表中多个或者全部用例设计的数据，一次性看到多个用例数据运行出相应的结果。这样可以避免了每次去更改参数值的烦恼，也减少修改参数出错的机率。这样大大减少了测试人员的工作量，并且也提高了接口测试用例的执行效率。Jmeter 读取excel数据使用的方法是使用Jmeter CSV Data Set Config参数化，使用方法如下： 一、数据准备 准备数据文件，一般以 .csv，.dat 等结尾的文件，数据之间的分隔符可用 ,或者 tab。 其中，将excel文件保存成csv格式后，jmeter读取后返回的数据总是出现乱码问题，以下就是解决的办法：先制作一个excel表格，导出存为.csv格式的文件。读取txt中的数据也是类似方法。 二.使用CSV Data Set Config参数化将csv里面的数据读取 以下是CSV Data Set Config各个参数使用说明: （1）Filename:数据文件的路径。 （2）Delimiter:数据之间的分隔符可用 ,或者 tab。 （3）Allow Quoated data: 双引号相关