对于对话框的数据绑定,我们在打开对话框前,先通过API模块请求获得JSON数据,然后绑定在对应的对话框模型属性上即可,如对于查看界面,我们的处理逻辑如下所示。
showView(id) {
var param = { id: id }
GetProductDetail(param).then(data => {
Object.assign(this.viewForm, data);
})
this.isView = true
},
对于表格的双击,我们同样绑定它的查看明细处理操作,如下模板代码和JS代码所示。
模板HTML代码如下:
<el-table
v-loading=“listLoading”
:data=“productlist”
border
fit
stripe
highlight-current-row
:header-cell-style=“{background:‘#eef1f6’,color:‘#606266’}”
@selection-change=“selectionChange”
@row-dblclick=“rowDbclick”
JS逻辑代码如下:
rowDbclick(row, column) {
var id = row.ID
this.showView(id);
},
=======================================================================
一般情况下,我们使用界面组件的时候,参考下官网《Element组件使用》,寻找对应组件的代码进行参考,就差不多了,这里还是就各种常规的Element组件进行大概的介绍吧。
对于表单,我们一般定义一个对应的名称,并设置它的data对应的模型名称即可,如下所示。
而表单项,一般是定义好表单项的Label即可,然后在其中插入对应的录入控件或者展示控件。如对于单文本组件使用,如下所示。
其中 v-model=“editForm.ProductNo” 就是对应绑定的数据。
而表单项,可以添加对字段的验证处理,在数据提交前,可以校验客户的录入是否有效等。
<el-form-item
prop=“email”
label=“邮箱”
:rules="[
{ required: true, message: ‘请输入邮箱地址’, trigger: ‘blur’ },
{ type: ‘email’, message: ‘请输入正确的邮箱地址’, trigger: [‘blur’, ‘change’] }
]"
注意这里表单项,必须添加一个prop的属性设置,如 prop=“email” 所示。
一般为了控制布局,我们还结合el-row进行一个布局的处理,如下代码所示(一行等于span为24,span=12也就是一行放两个控件组)。
下拉列表的绑定处理,也是通过 v-model 进行值的绑定,而选项则可以通过数据列表进行绑定。
<el-option
v-for=“(item, key) in typeList”
:key=“key”
:label=“item.value”
:value=“item.key”
/>
而选项中的 typeList,我们可以在页面初始化的时候获取出来即可。
created() {
// 获取产品类型,用于绑定字典等用途
GetProductType().then(data => {
if (data) {
data.forEach(item => {
this.productTypes.set(item.id, item.name)
this.typeList.push({ key: item.id, value: item.name })
})
// 获取列表信息
this.getlist()
}
});
},
对于textarea常规的多行文本框,其实和普通单行文本框处理差不多,指定它的type=“textarea” 和 rows的数值即可。
而对于一些可能需要展示HTML内容的,我们可以使用DIV控件来展示,通过v-html标识来处理包含HTML代码的内容。
对于一些需要展示服务器图片,我们请求后,根据Element图片组件的设置处理即可,如下包括单个图片和多个图片的展示和预览操作。
图片展示的代码如下所示。
<el-image
style=“width: 100px; height: 100px”
:src=“viewForm.Picture”
:preview-src-list=“[viewForm.Picture]”
/>
<el-image
style=“width: 100px; height: 100px”
:src=“viewForm.Banner”
:preview-src-list=“[viewForm.Banner]”
/>
<el-image
v-for=“item in viewForm.pics”
:key=“item.key”
class=“border-radius”
:src=“item.pic”
style=“width: 100px; height: 100px;padding:10px”
:preview-src-list=“getPreviewPics()”
/>
上图中,如果是单个图片,那么预览我们设置一个集合为一个url即可,如 [viewForm.Banner],如果是多个图片,需要通过一个函数来获取图片列表,如 getPreviewPics() 函数所示。
getPreviewPics() {
// 转换ViewForm.pics里面的pic集合
var list = []
if (this.viewForm.pics) {
this.viewForm.pics.forEach(item => {
if (item.pic) {
list.push(item.pic)
}
})
}
return list
}
对于一些需要使用扩展组件的,我们一般搜索下解决方案,通过npm安装对应的组件即可解决,如对于条码和二维码,我使用 @chenfengyuan/vue-barcode和 @chenfengyuan/vue-qrcode,一般在Github上搜索下关键字,总能找到一些很受欢迎的第三方组件。
安装这些组件都有具体的说明,如下所示(如果卸载,直接修改install为uninstall即可)。
npm install @chenfengyuan/vue-barcode vue
以及:
npm install @chenfengyuan/vue-qrcode vue
条码和二维码的展示效果如下所示:
如果全局引入barcode和qrcode 组件,我们在main.js里面引入即可,如下代码所示:
// 引入barcode,qrcode
import VueBarcode from ‘@chenfengyuan/vue-barcode’;
import VueQrcode from ‘@chenfengyuan/vue-qrcode’;
Vue.component(VueBarcode.name, VueBarcode);
富文本编辑,我这里采用了 Tinymce 第三方组件来实现编辑处理,展示效果如下所示。
代码如下所示:
以上就是一些常规的界面组件的使用,后面在继续介绍文件上传和图片结合的操作。
========================================================================
使用Vue的比以往BS开发的好处,就是可以很容易实现组件化,这点很好,一旦我们定义好一个控件,就可以在多个界面里面进行使用,非常方便,而且封装性可以根据自己的需要进行处理。
查询区域一般的界面效果如下所示,除了包含一些常用的查询条件,一般会有一些下拉列表,这些可能是后台字典里面绑定的内容,可以考虑作为一个通用的字典下拉列表组件来做。
其实界面录入的时候,也往往需要这些条件下拉列表的。
那么我们来定义一个自定义组件,并在界面上使用看看。
在Components目录创建一个目录,并创建一个组件的vue文件,命名为my-dictdata.vue,如下所示。
界面模板代码我们就一个select组件为主即可。
<el-option
v-for=“(item, index) in dictItems”
:key=“index”
:label=“item.Text”
:value=“item.Value”
/>
script脚本逻辑代码如下所示。