铜川泰士公馆建设网站网站开发绩效指标

当前位置： 首页 > news >正文

铜川泰士公馆建设网站,网站开发绩效指标,苍南做网站,全国公路建设信用网站vxe-table简单使用 vue vxe-table vue整合vxe-table vue2 vxe-table 简单使用安装vxe-table引用使用安装vxe-table vue2稳定版本 vue3稳定版本 npm install xe-utils vxe-tablelegacy安装 vxe-table 依赖的插件 npm i xe-utils引用 我这边是全局引入#xff0c;可以根据自… vxe-table简单使用 vue vxe-table vue整合vxe-table vue2 vxe-table 简单使用安装vxe-table引用使用安装vxe-table vue2稳定版本 vue3稳定版本 npm install xe-utils vxe-tablelegacy安装 vxe-table 依赖的插件 npm i xe-utils引用 我这边是全局引入可以根据自己情况按需引入 main.js import Vue from vueimport VXETable from vxe-tableimport vxe-table/lib/style.cssVue.use(VXETable)// 给 vue 实例挂载内部对象例如// Vue.prototype.\(XModal VXETable.modal// Vue.prototype.\)XPrint VXETable.print// Vue.prototype.\(XSaveFile VXETable.saveFile// Vue.prototype.\)XReadFile VXETable.readFile使用 我这边使用的 demo 用到了 虚拟滚动,列筛选自定义列内容 可直接全复制 !– 页面 – templatevxe-button clickclearFilter清除所有的筛选条件/vxe-button!– 表格–div classmain-table-divvxe-tablerefxTable1sizeminibordermax-height800:row-config{ isHover: true, height: 60 }:column-config{ resizable: true }:sort-config{ trigger: cell }:datatableDataaligncentershow-overflow:scroll-x{gt: 30}:scroll-y{gt: 300}:filter-config{remote: true}filter-changefilterChangeEventvxe-column title机种名称 fieldmachineTypeName width200 :filters[{ data: }] :filter-methodfilterMethodtemplate #filter{ \(panel, column }!-- 官网给的示例是遍历 filters 属性值数组 但是一般搜索只有一个输入框不需要遍历尽量减少一点性能消耗我这边使用固定数组第一个元素--!-- input typetype v-for(option, index) in column.filters :keyindex v-modeloption.data input\)panel.changeOption(\(event, !!option.data, option) --input v-modelcolumn.filters[0].data typetype input\)panel.changeOption(\(event, !!column.filters[0].data, column.filters[0])/template/vxe-columnvxe-column title辅料名称 fieldauxiliaryMaterialName width200 :filters[{ data: }] :filter-methodfilterMethodtemplate #filter{ \)panel, column }input v-modelcolumn.filters[0].data typetype input\(panel.changeOption(\)event, !!column.filters[0].data, column.filters[0])/template/vxe-columnvxe-column title品牌 fieldbrand width120 :filters[{ data: }] :filter-methodfilterMethodtemplate #filter{ \(panel, column }input v-modelcolumn.filters[0].data typetype input\)panel.changeOption(\(event, !!column.filters[0].data, column.filters[0])/template/vxe-columnvxe-column title规格型号 fieldspecification width150 :filters[{ data: }] :filter-methodfilterMethodtemplate #filter{ \)panel, column }input v-modelcolumn.filters[0].data typetype input\(panel.changeOption(\)event, !!column.filters[0].data, column.filters[0])/template/vxe-columnvxe-column title封装用量(ml/g) fieldpackageAmount width130 :filters[{ data: }] :filter-methodfilterMethodtemplate #filter{ \(panel, column }input v-modelcolumn.filters[0].data typetype input\)panel.changeOption(\(event, !!column.filters[0].data, column.filters[0])/template/vxe-columnvxe-column title料号 fieldmaterialNumber width150 :filters[{ data: }] :filter-methodfilterMethodtemplate #filter{ \)panel, column }input v-modelcolumn.filters[0].data typetype input\(panel.changeOption(\)event, !!column.filters[0].data, column.filters[0])/template/vxe-columnvxe-column title用量(ml/g) fielddosage width120 :filters[{ data: }] :filter-methodfilterMethodtemplate #filter{ \(panel, column }input v-modelcolumn.filters[0].data typetype input\)panel.changeOption(\(event, !!column.filters[0].data, column.filters[0])/template/vxe-columnvxe-column title使用位置 fieldusePosition width120 :filters[{ data: }] :filter-methodfilterMethodtemplate #filter{ \)panel, column }input v-modelcolumn.filters[0].data typetype input\(panel.changeOption(\)event, !!column.filters[0].data, column.filters[0])/template/vxe-columnvxe-column title其他说明 fielddoc width120 show-header-overflow show-overflowtitle show-footer-overflow /vxe-column title创建时间 fieldaddTime width180 /vxe-column title创建人 fieldaddUserName width180 :filters[{ data: }] :filter-methodfilterMethodtemplate #filter{ \(panel, column }input v-modelcolumn.filters[0].data typetype input\)panel.changeOption(\(event, !!column.filters[0].data, column.filters[0])/template/vxe-columnvxe-column title最后修改时间 fieldupdateTime width180 /vxe-column title最后修改人 fieldupdateUserName width180 :filters[{ data: }] :filter-methodfilterMethodtemplate #filter{ \)panel, column }input v-modelcolumn.filters[0].data typetype input\(panel.changeOption(\)event, !!column.filters[0].data, column.filters[0])/template/vxe-columnvxe-column title操作 width200 fixedrighttemplate #default{ row, rowIndex }divel-button sizesmall typetext clickshowChange(row)修改/el-buttonel-button sizesmall typetext clickdeleteById(row, rowIndex)删除/el-button/div/template/vxe-column/vxe-table/div /templatescript export default {name: Index,components: {},props: [],data() {return {tableData: [ {id: 1006,machineTypeName: Cheng Fat,auxiliaryMaterialName: Cheng Fat,brand: aeaVNGZ7An,specification: IhABS5QBlX,packageAmount: 14LBJIvbgZ,materialNumber: Ik8mzrfSWg,dosage: 4FOZcY3KEF,usePosition: DWI5RHkBIY,doc: nT65qhLkvI,addTime: 2017-09-10 00:22:20,addUserName: Cheng Fat,updateTime: 2021-04-16 15:04:40,updateUserName: 2005-09-24},{id: 1005,machineTypeName: Yuen Tsz Hin,auxiliaryMaterialName: Yuen Tsz Hin,brand: e7fPgpqElq,specification: l57klAlUd4,packageAmount: 6Y4e7xcfWg,materialNumber: 2FOmQSMC8H,dosage: TfdbMdn10B,usePosition: vFVoDlRbYI,doc: 6sArmCG4oP,addTime: 2002-08-12 05:47:08,addUserName: Yuen Tsz Hin,updateTime: 2009-09-21 22:40:57,updateUserName: 2001-04-10}],search: {machineTypeName: ,auxiliaryMaterialName: ,brand: ,specification: ,packageAmount: ,materialNumber: ,dosage: ,usePosition: ,addUserName: ,updateUserName: }}},computed: {},watch: {},beforeMount() { },mounted() { },created() {},activated() {},methods: {/*** 当筛选条件发生变化时会触发该事件,api: https://vxetable.cn/v3/#/table/api?filterNamefilter-change* param {} column 当前筛选的列属性 param {} property 当前筛选的列名称 param {} values 不知道忽略 param {} datas 当前表格所有列的筛选数据值列表 param {} filterList 当前表格所有列的筛选数据列表带列属性和值 param {} $event 事件/filterChangeEvent({ column, property, values, datas, filterList, \(event }) {console.info(列筛选)// console.info(column, column)// console.info(property, property)// console.info(values, values)// console.info(datas, datas)console.info(filterList, filterList)// console.info(\)event, \(event)// 先清空之前的搜索对象信息this.search {machineTypeName: ,auxiliaryMaterialName: ,brand: ,specification: ,packageAmount: ,materialNumber: ,dosage: ,usePosition: ,addUserName: ,updateUserName: }// 遍历当前表所有的筛选数据赋值给搜索对象filterList.forEach(item {// 将当前筛选的列条件数据赋值给 查询对象console.info(item)// item.property 当前筛选条件的列名称// item.datas[0] 当前筛选条件的列值 因为 每列的 filters 数组数据 只有一个元素固定0this.search[item.property] item.datas[0]})console.info(查询参数, this.search)// 将参数传递到后台进行查询},// 表格单个列筛选这个筛选的是 当前表数据不使用这个filterMethod({ value, row, column }) {},// 清空表格所有查询条件clearFilter() {this.\)refs.xTable1.clearFilter()// 清空查询对象this.search {machineTypeName: ,auxiliaryMaterialName: ,brand: ,specification: ,packageAmount: ,materialNumber: ,dosage: ,usePosition: ,addUserName: ,updateUserName: }// 重新请求服务端查询}// 删除deleteById(row, index) {console.info(row, index)},// 打开修改 弹出框showChange(row) {console.info(row)}} } /script style langscss scoped /style