乐趣区

关于vue.js:vueElementUI遇到的问题

jiezi
1. form 表单的布局

能够通过 <el-row> <el-col :span(默认是将整个屏幕分成 24)> 标签来扭转格局; 还能够通过 <div> 外面的 style 标签(margn-xx[左, 右]) 来扭转布局 align 抉择居中靠右还是靠左 ;

2. table 表格内文字过多主动换行显示不雅观

在 <el-table> 标签内应用

:show-overflow-tooltip="true"

就能够鼠标放在内容哪里就主动显示全部内容然而如果内容过多的话会铺满全屏, 在 <style> 标签内加上

<style>
.el-tooltip__popper {max-width: 20%;}
.el-tooltip__popper,
.el-tooltip__popper.is-dark {background: rgb(48, 65, 86) !important;
color: #fff !important;
line-height: 24px;
}
</style>

会比拟难看些
3. 对于:model 和 v -model form 表单应用:model 如果不应用的话 rules 输入框就算输出文字 还是会有提示信息,
4. 对于 elementUI 日期组件格局转换

<el-form-item label=” 毕业工夫:” prop=”graduationDate”>

        <template>
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker style="width: 200px;" size="mini" v-model="formdata.graduationDate" align="right" type="date"
              placeholder="抉择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </template>
      </el-form-item>

value-format=”yyyy-MM-dd” 日期格局转换

5. 遇到的一个性能 @change

再点击下拉选项的时候执行的一个函数
依据下拉框的抉择的值不同能够用来扭转其四周的属性值

6. 后盾返回的值是数值 在前台转换为数值对应的 label :formatter

为每一列绑定属性 formatter, 值为一个函数, 返回要翻译成的中文字符串

<el-table-column prop="expertsp" :formatter="getExpertsp" label="审批状态" width="85">
  </el-table-column>
  
  data 中的定义
  Expertsp: [{
        value: '1',
        label: '新增'
      }, {
        value: '2',
        label: '审批中'
      },
      {
        value: '3',
        label: '审批通过'
      },
      {
        value: '4',
        label: '审批不通过'
      }
    ],
    
     // 有多少条数据此函数就会触发多少次 (后盾传数据, 前台遍历显示对应的值) 函数
  getExpertsp(row, col) {for (var i in this.Expertsp) {if (this.Expertsp[i].value == row.expertsp) {return this.Expertsp[i].label
      }

    }
  },
7.vue 给每行加序号

①咱们想在 el-table 中增加序号列时，如下

<el-table-column label="序号" type="index" width="50" align="center">
</el-table-column>

咱们会惊奇的发现，咱们翻页时，序号永远都是从 1 开始。因为每一次翻页都是依据以后数据的 index 显示，所以咱们要自定义
革新如下

<el-table-column label="序号" type="index" width="50" align="center">
  <template scope="scope">
    <span>{{(page - 1) * pageSize + scope.$index + 1}}</span>
  </template>
</el-table-column>

两种

<el-table-column label="序号" type="index" width="60" :show-overflow-tooltip="true">
    <template scope="scope">
      <span>{{scope.$index + 1}}</span>
    </template>
  </el-table-column>
8. 下拉选框里的性能
clearable 可革除下拉框里内容

filterable 搜寻性能 能搜寻此字段的存在内容
9. 遇见的一个性能, 在本页面跳转后 在关上的页面返回, 刷新原本的界面
 // 跳转后页面刷新 和 data,methods 同级
beforeRouteLeave(to, from, next) {console.log(to.path)
  to.meta.keepAlive = false
  next()},
10. 解决界面无奈渲染, 然而属性有值, 无奈显示

办法:

手动渲染

this.$forceUpdate() //数据档次太多的时候, 能够手动调用, 触发 render 函数进行自动更新

this.$set(this.formdata,’firstname’,name + sex)

本人了解的意思: this.formdata(能够使 form 的绑定属性, 也能够是 table; ‘firstname’ 是属性名字单引号; name + sex 是赋值给 firstname 的值)

退出移动版