本文介绍了在Vue+Element UI环境下，如何使用钩子函数和自定义指令解决自动获取焦点和字体染色的问题。通过实例展示了在元素选择上的常见陷阱，提出了解决方案，包括使用``标签来直接操作目标对象，以避免Element UI封装导致的问题。
element ui
element ui 在我的认知里,其是将我们实际要用到的标签放入已经定义了style的div标签中
下面是我的学习练习的emo细节,如果想直接到重点,请直接往下拖到最后
例子:(我想用一个好看点的输入框,不会前端的我只能找ui工具了…)
<el-input v-model="bookname" placeholder="请输入书名" style="width: 15%;"></el-input>
实际:(这个输入框的style都封装在了div的 class="el-input"属性中,以及input的class="el-input__inner"属性中,
忽略style="width: 15%;"这是我手动调节的输入框宽度)
<div class="el-input" style="width: 15%;">
<input type="text" autocomplete="off" placeholder="请输入书名" class="el-input__inner">
</div>
也就是说如果我们对el-input标签所做的所有操作,都会转变为对input标签的外层的div标签的操作,。
再举个例子:
在element的el-table-column标签中,如果需要用到管道,以下这两个方式都是错误的,是调用不到formatDate 这个过滤器的:(因为这样是绑定不到data区域里的变量的)
<el-table-column label="更新时间" prop="upDate|formatDate "></el-table-column>
<el-table-column label="更新时间" v-model="upDate|formatDate "></el-table-column>
想要调用到过滤器只能获取div中实际包裹的标签才行:
例如这样:(在el-table-colum标签内再定一个template 标签,slot-scope="scope"获取我们真正需要的对象,双引号内的名字可以自定义,这样获取到的对象就是我们想要的对象)
<el-table :data="search(keywords)" style="text-align:center">
<el-table-column label="更新时间" prop="upDate">
<template slot-scope="scope">
{
{
scope.row.upDate | formatDate }}
</template>
</el-table-column>
</el-table>
<!-- =================================我是分割线============================== -->
var vm = new Vue({
el: '#app',
data: {
id: '',
bookname: '',
author: '',
keywords: '',
upDate: '',
books: [{
id: 1,
bookname: '离骚',
author: '屈原',
upDate: new Date().getTime()
}...]}})
在单纯只用vue的时候,v-model="upDate|
最低0.47元/天 解锁文章
2972
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
