州网站建设申请网站多少钱

州网站建设,申请网站多少钱,关键词排名优化免费,门户网站建设评估由于element-ui的自定义header一直不生效#xff08;当type未selection时slot / rende-header 都不生效#xff09;#xff0c;所以还是使用element-ui原生API去做。 示例 代码 el-table row-key 属性是必要的。 templatedivel-tablereftable当type未selection时slot / rende-header 都不生效所以还是使用element-ui原生API去做。示例代码el-tablerow-key属性是必要的。templatedivel-tablereftable:datatableDataFilterstylewidth:100%row-keyidheight500selecthandleSelectselect-allhandleSelectAllel-table-columntypeselectionwidth55/el-table-columnel-table-columntypeindexwidth50label序号/el-table-columnpropnamelabel姓名width120/el-table-columnpropagelabel年龄width80sortable/el-table-columnpropemaillabel邮箱min-width180/el-table-columnpropcitylabel城市width100/el-table-columnpropoccupationlabel职业width150/el-table-columnpropjoinDatelabel加入日期width120//el-tableel-pagination:current-page.synccurrentPage:page-sizes[10, 20, 50]:page-size.syncpageSizelayouttotal, sizes, prev, pager, next, jumper:totaltotalsize-changehandleSizeChangecurrent-changehandleCurrentChange/el-pagination/div/templatescriptexportdefault{data(){return{// 存放完整数据tableData:[],multipleSelection:[],currentPage:1,pageSize:10,/* 选择Set 是因为在这个场景使用起来比较方便也能优化些许性能。 如果需要使用watch来监听selectedIds 的变化可以改用为数组。 如改用数组 select等方法中的判断就需要相对繁琐。 或是对Set 进行包装。 */selectedIds:newSet(),isSelectAll:false};},computed:{total(){returnthis.tableData.length},// 前端分页tableDataFilter(){consts(this.currentPage-1)*this.pageSize,esthis.pageSizereturnthis.tableData.slice(s,e)}},// 默认全选如果有需要此代码可以放在接口调用数据赋值后asyncmounted(){awaitthis.$nextTick()this.handleSelectAll()},methods:{// 当勾选状态改变做后续的逻辑处理change(){// 已选中列表constselectListthis.tableData.filter(xthis.selectedIds.has(x.id))// do something...},// 勾选/取消单行handleSelect(selection,row){if(this.selectedIds.has(row.id)){this.selectedIds.delete(row.id)}else{this.selectedIds.add(row.id)}this.checkStatus()// 因为 Set 数据结构 不能够被Vue所监听到// 所以在每次修改选中状态之后手动调用一次callbackthis.change()},checkStatus(){this.isSelectAllthis.selectedIds.sizethis.total},// 全选事件handleSelectAll(){// 当前是全选状态 - 全部取消if(this.isSelectAll){this.selectedIds.clear()this.$refs.table?.clearSelection?.()}else{this.tableData.forEach(x{this.selectedIds.add(x.id)// ?. 在每次调用接口会清楚选中状态防止在created中调用接口时table dom还未挂载。this.$refs.table?.toggleRowSelection?.(x,true)})}this.checkStatus()this.change()},handleSizeChange(){this.setSelection()},handleCurrentChange(){this.setSelection()},// 分页切换 - 处理当前页面勾选状态asyncsetSelection(){awaitthis.$nextTick()consttableRefthis.$refs.tableif(!tableRef)returnthis.tableData.forEach(x{tableRef.toggleRowSelection(x,this.selectedIds.has(x.id))})},},};/script