企业做网站哪个最好,网页升级访问每天正常更新,百度关键词推广可以自己做吗,企业网站建设论文基础使用
一个基于 vue 的 PC 端表格组件#xff0c;支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等…
vxe-grid v-bindgridOptions1…基础使用
一个基于 vue 的 PC 端表格组件支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等…
vxe-grid v-bindgridOptions1template #toolbar_buttonsvxe-button clickgridOptions1.align left居左/vxe-buttonvxe-button clickgridOptions1.align center居中/vxe-buttonvxe-button clickgridOptions1.align right居右/vxe-button/template/vxe-gridexport default {data () {return {gridOptions1: {border: true,resizable: true,showOverflow: true,height: 300,align: left,toolbarConfig: {slots: {// 自定义工具栏模板buttons: toolbar_buttons}},columns: [{ type: seq, width: 50 },{ field: name, title: Name },{ field: sex, title: Sex, showHeaderOverflow: true },{ field: address, title: Address, showOverflow: true }],data: [{ id: 10001, name: Test1, nickname: T1, role: Develop, sex: Man, age: 0, address: Shenzhen },{ id: 10002, name: Test2, nickname: T2, role: Test, sex: Women, age: 22, address: Guangzhou },{ id: 10003, name: Test3, nickname: T3, role: PM, sex: Man, age: 100, address: Shanghai },{ id: 10004, name: Test4, nickname: T4, role: Designer, sex: Women, age: 70, address: Shenzhen },{ id: 10005, name: Test5, nickname: T5, role: Develop, sex: Women, age: 10, address: Shanghai },{ id: 10006, name: Test6, nickname: T6, role: Designer, sex: Women, age: 90, address: Shenzhen },{ id: 10007, name: Test7, nickname: T7, role: Test, sex: Man, age: 5, address: Shenzhen },{ id: 10008, name: Test8, nickname: T8, role: Develop, sex: Man, age: 80, address: Shenzhen }]}}}}
vxe-grid refxTablehighlight-hover-rowhighlight-current-row:alignalign:roundtrue:borderborder:stripestripe:loadingloading:show-overflowshowOverflow:show-headershowHeader:show-footershowFooter:toolbarConfigtoolbarConfig:export-configexportConfig:edit-configeditConfig:filter-configfilterConfig:print-configprintConfig:footer-methodfooterMethod:sizesize:heightheight:treeConfigtreeConfig:seq-config{startIndex: (tablePage.pageIndex - 1) * tablePage.pageSize}:columnscolumns:datadata:radio-configradioConfig:checkbox-configcheckboxConfig:menu-configtableMenuedit-closededitClosedcell-clickrowClickcell-dblclickrowdblClickmenu-clickmenuClick!-- 自定义工具栏 --template #toolbar_buttonsslot/slot/template!-- 分页组件 --template #pagervxe-pager v-iftablePage.showPagebackground:layouts[Sizes, PrevJump, PrevPage, Number, NextPage, NextJump, FullJump, Total]:current-page.synctablePage.pageIndex:page-size.synctablePage.pageSize:page-sizes[10,20,50,100,200]:totaltablePage.totalpage-changehandlePageChange/vxe-pager/template/vxe-grid
/template
scriptimport /components/vxeTable/renderer.js
export default {name: Table,props: {loading: {type: Boolean,default: false},height: {type: String || Number,default: () {return auto}},stripe: {type: Boolean,default: true},border: {type: String,default: full},align: {type: String,default: center},showOverflow: {type: String,default: () { }},showHeader: {type: Boolean,default: true},showFooter: {type: Boolean,default: false},toolbarConfig: {type: Object,default: () { }},size: {type: String,default: () { }},tablePage: {type: Object,default: () {return {showPage: false,pageIndex: 1,pageSize: 10,total: 0}}},columns: {type: Array,default: () {return []}},data: {type: Array,default: () {return []}},treeConfig: {type: Object,default: undefined},// 可编辑配置项editConfig: {type: Object,default: () {return {enabled: false,trigger: click,mode: row,beforeEditMethod: true}}},// 复选框配置项checkboxConfig: {type: Object,default: () {return { highlight: true, range: true, trigger: default }}},// 右键快捷菜单配置tableMenu: {type: Object,default: () {return {}}},// 表尾方法footerMethod: {type: Function,default: () {return []}}},data() {return {// 导出配置项exportConfig: {// 默认选中类型type: xlsx,// 局部自定义类型types: [xlsx, csv],// 自定义数据量列表modes: [current, selected, all],filename: ,sheetName: ,isFooter: true,isHeader: true,isMerge: true,isColgroup: true},filterConfig: {remote: false},// 打印配置项printConfig: {mode: current,modes: [current],sheetName: ,isHeader: true,isColgroup: true,isFooter: true},// 单选框配置项radioConfig: {highlight: true,strict: false,trigger: row}}},methods: {// 分页改变触发事件handlePageChange({ currentPage, pageSize }) {this.tablePage.pageIndex currentPagethis.tablePage.pageSize pageSizethis.$emit(pageChange, { pageIndex: currentPage, pageSize })},// 单元格点击事件rowClick({ row, rowIndex, columnIndex, column }) {Object.defineProperty(row, rowIndex, { // 给每一行添加不可枚举属性rowIndex来标识当前行value: rowIndex,writable: true,enumerable: false})// 筛除多选时单击触发操作if (!column.property) {return}this.$emit(rowClick, { row, rowIndex, columnIndex })},// 单元格双击事件rowdblClick({ row, rowIndex, column }) {// 筛除多选时单击触发操作if (!column.property) {return}this.$emit(rowdblClick, { row, rowIndex })},// 右键点击单元格菜单menuClick({ menu, row, column }) {this.$emit(menuClick, { menu, row, column })},// 获取表格数据集(包括插入的临时数据)getRecordset() {return this.$refs.xTable.getRecordset()},// 获取当前选中的行数据(用于单选框)getRadioRecord() {return this.$refs.xTable.getRadioRecord()},// 删除复选框选中的行数据removeCheckboxRow() {return this.$refs.xTable.removeCheckboxRow()},// 获取当前已选中的行数据(用于复选框)getCheckboxRecords() {return this.$refs.xTable.getCheckboxRecords()},// 只对 edit-config 配置时有效单元格编辑状态下被关闭时会触发该事件editClosed(row, rowIndex, column) {this.$emit(editClosed, row, rowIndex, column)}// 多选操作勾选某行// setCheckboxRow(rows, checked) {// if (rows.length 0) { // 清除全部多选选择// this.$refs.xTable.clearCheckboxRow()// } else {// this.$refs.xTable.setCheckboxRow(rows, checked)// }// }// // 表格尾部// sumNum(list, field) {// let count 0// let num 0// list.forEach(item {// count Number(item[field])// num count.toFixed(0)// })// return num// },// meanNum(list, field) {// let count 0// list.forEach(item {// count Number(item[field])// })// return (count / list.length).toFixed(2)// },// // 表格尾部总计// footerMethod({ columns, data }) {// // return this.footerData// const sums []// columns.forEach((column, columnIndex) {// if (columnIndex 0) {// sums.push(总)// } else {// let sumCell null// switch (column.property) {// case stCount:// case Sales:// case Trans:// case lstCount:// case lSales:// case lTrans:// sumCell this.sumNum(data, column.property)// break// case AC:// case lAC:// sumCell this.meanNum(data, column.property)// break// }// sums.push(sumCell)// }// })// // 返回一个二维数组的表尾合计// return [sums]// }}
}
/script
style langless scoped
.my-menus {background-color: #ffffff;
}
.my-menus .vxe-ctxmenu--link {width: 300px;
}
.my-copy-item {font-weight: 700;font-style: oblique;
}
/deep/ .vxe-table--render-default .vxe-body--row.row--current {background: #fff3e0;
}
/deep/ .vxe-toolbar {padding: 0 15px;.vxe-buttons--wrapper {.vxe-button:not(.is--disabled):hover {color: #82bdf8;}}
}
/stylerederer.js import SelcetFilter from ./component/selcetFilter.vueimport SelectContent from ./component/selectContent.vueimport DataFilter from ./component/dataFilter.vueimport Vue from vueVue.component(SelcetFilter, SelcetFilter)Vue.component(SelectContent, SelectContent)Vue.component(DataFilter, DataFilter)// 创建支持列内容的筛选渲染器VXETable.renderer.add(SelcetFilter, {// 不显示底部按钮使用自定义的按钮isFooter: false,// 筛选模板renderFilter(h, renderOpts, params) {return [selcet-filter params{ params }/selcet-filter]},// 重置数据方法filterResetMethod({ options }) {options.forEach(option {option.data { vals: [], sVal: }})},// 筛选数据方法filterMethod({ option, row, column }) {const { vals } option.dataconst cellValue row[column.field]return vals.includes(cellValue)}})// 创建支持列内容的筛选渲染器VXETable.renderer.add(DataFilter, {// 不显示底部按钮使用自定义的按钮isFooter: false,// 筛选模板renderFilter(h, renderOpts, params) {return [data-filter params{ params }/data-filter]},// 重置数据方法filterResetMethod({ options }) {options.forEach(option {option.data { vals: [], sVal: }})},// 筛选数据方法filterMethod({ option, row, column }) {const { vals } option.dataconst cellValue row[column.field]return vals.includes(cellValue)}})// 创建element-select下拉框的可编辑渲染器VXETable.renderer.add(SelectContent, {// 可编辑模板renderEdit(h, renderOpts, params) {return [select-content params{ params } /select-content]}// 可编辑显示模板// renderCell(h, renderOpts, params) {// const {row, column} params// return [// span{ row[column.field] }/span// ]// }})dataFilter.vue
div classdata-filterel-date-picker clearablev-modelvalue1typedaterangerange-separator至start-placeholder开始日期end-placeholder结束日期changedataChage/el-date-picker/div/templatescriptexport default {name: DataFilter,props: {params: Object},inject: {getTableData: { value: getTableData, default: null }},data() {return {value1: }},methods: {dataChage(val) {console.log(%c [ val ]-31, font-size:13px; background:pink; color:#bf2c9f;, val)}}}/scriptstyle scoped/style
