热卖商品
新闻详情
Vue element-ui之神坑_!吃饭第一名的博客-CSDN博客
来自 : CSDN技术社区
发布时间:2021-03-25
37.使用卡片导航条 cards
import CardTop from ../common/Cards.vue
CardTop
CardTop contenet 学校列表 back navageteNewadd btns 新增 /CardTop
template div class card-top div class tops v-if !Breadcrumb span :class [Background ? content color : content ] contenet /span div class button v-if btns click back {{ btns }} /div /div div class tops1 v-if Breadcrumb el-breadcrumb separator-class el-icon-arrow-right div el-breadcrumb-item :to { path: List[0].path } {{ List[0].name }} /el-breadcrumb-item el-breadcrumb-item {{ List[1].name }} /el-breadcrumb-item /div div div class button1 click back {{ btns }} /div /div /el-breadcrumb /div /div /template script export default { data() { return {} props: { // 设置是否是Breadcrumb Breadcrumb: { type: Boolean, default: false // 设置不是设置breadcrumb 的左边内容 contenet: String, // 设置按钮的内容 btns: { type: String, default: // 设置breadcrumb list的数据 List: Array, // 设置是否有背景颜色 Background: { type: Boolean, default: false Height: { type: Number, default: 0 url: { type: String, default: methods: { back() { this.$emit( back , this.btns, this.url) /script style lang scss scope .card-top { box-sizing: border-box; width: 100%; height: 50px; margin-bottom: 20px; .tops { width: 100%; height: 50px; height: 100%; padding: 10px 20px; box-sizing: border-box; font-size: 16px; // font-weight: bold; color: #333333; border-bottom: 1px solid rgba(243, 243, 243, 1); // background: red; line-height: 32px; .button { width: 70px; height: 32px; background: rgba(32, 198, 200, 1); border-radius: 4px; float: right; text-align: center; line-height: 32px; font-size: 14px !important; color: white; cursor: pointer; .tops1 { width: 100%; height: 50px; padding: 10px 20px; box-sizing: border-box; line-height: 50px; .el-breadcrumb { width: 100%; line-height: 34px; margin: 0; font-size: 16px; justify-content: space-between; .el-button { cursor: pointer; :nth-of-type(2) { line-height: 34px; float: right; border-bottom: 1px solid rgba(243, 243, 243, 1); box-sizing: border-box; .content { font-size: 16px;// .el-button size mini type primary .button1 { width: 70px; height: 32px; background: rgba(32, 198, 200, 1); border-radius: 4px; float: right; text-align: center; font-size: 14px; color: white; line-height: 32px; cursor: pointer;.bc { width: 100%; height: 53px; background: #7ac9cb;.color { color: white; /style38.关于watch监听属性 新旧值一样的问题
data:{ testData:{ dataInfo:{ a: 我是a , b: 我是b watch: { testDataNew: { handler: (val, olVal) { console.log( 我变化了 , val, olVal) deep: true computed: { testDataNew() { return JSON.parse(JSON.stringify(this.testData))39.select框异步获取数据的问题
如果页面初次加载时候需要select的框的值 那么一定要在mounted方法里执行40.element使用外部的 class图片
https://www.jianshu.com/p/59dd28f0b9c9
el-form-item el-input placeholder 用户名 v-model form.username i slot prefix class el-icon-thirdshouji /i /el-input /el-form-item41.表格内容超出部分提示
:show-overflow-tooltip true el-table-column prop school_name :show-overflow-tooltip true label 学校名称 align center width 200 /el-table-column42.火狐滚动条隐藏
scrollbar-width: none;43.谷歌滚动条隐藏
::-webkit-scrollbar { display: none;44.element-ui表格合并 合并同一行的几个列
el-table :data orderList :row-class-name getRowClassName default-expand-all :span-method arraySpanMethod type expand :header-cell-style getRowClass style width: 100% :span-method arraySpanMethod
arraySpanMethod({ row, column, rowIndex, columnIndex }) { console.log(rowIndex) if (rowIndex 0) { if (columnIndex 2) { return [1, 2] } else if (columnIndex 3) { return [0, 0] if (rowIndex 0) { if (columnIndex 5) { return [1, 2] } else if (columnIndex 6) { return [0, 0] if (rowIndex 0) { if (columnIndex 12) { return [1, 2] } else if (columnIndex 10) { return [0, 0]45.element-ui获得省市区
arr_arr[0] parseInt(res.data.data.province) arr_arr[1] parseInt(res.data.data.city) arr_arr[2] parseInt(res.data.data.district) this.$nextTick(() { this.addr_arr arr_arr // 等到dom加载完成后把数据赋值
el-form-item label-width 100px label 所属地区 el-cascader filterable :options cityData v-model addr_arr /el-cascader /el-form-item46.页面刷新保存vuex
// 在页面刷新时将store保存到sessionStorage里 window.addEventListener( beforeunload , () { sessionStorage.setItem( store , JSON.stringify(this.$store.state))
本文链接: http://elementis412.immuno-online.com/view-751256.html
发布于 : 2021-03-25
阅读(0)
最新动态
2021-03-25
2021-03-25
2021-03-25
2021-03-25
2021-03-25
2021-03-25
2021-03-25
2021-03-25
2021-03-25
2021-03-25
2021-03-25
2021-03-25
公司介绍
品牌分类
联络我们