no message
Former-commit-id: 68c7e5576de32dc789116a260fa2baae713d6d3f [formerly 68c7e5576de32dc789116a260fa2baae713d6d3f [formerly 68c7e5576de32dc789116a260fa2baae713d6d3f [formerly 68c7e5576de32dc789116a260fa2baae713d6d3f [formerly 7e4ebebe4deddb211f432353bce6b3a0c5b7cc49 [formerly 7e8b3ce8c71accd7d01aa95f8adcfbe0e9f5fc82]]]]] Former-commit-id: 0bacc67d11e1b5d25924f19ddf520d745278ef74 Former-commit-id: 2ff7d1ff49d2a57824257c10f16a14e547506b7c Former-commit-id: f9712c26a23a04f8d2e98d65d09bd6a21e8e15e9 [formerly 5d0c896c14f980adae9bf7df433fce3c09b21e9c] Former-commit-id: 71f8e95a94b6fb600ff8a208fbb3b504f204e8c6 Former-commit-id: 22253bcc9affb24b2d0b687433bc094b659343f6 Former-commit-id: 38140ffa2aa318da364289e0fb35fd5f129fc813 Former-commit-id: aa61457c6cbac3d4bde5f584be4816a4f7b68216 Former-commit-id: 5fd765b55d8d8a1fd8b19920777403ed86b6c538
This commit is contained in:
@@ -7,7 +7,7 @@
|
||||
"scripts": {
|
||||
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
|
||||
"start": "npm run dev",
|
||||
"lint": "eslint --ext .js,.vue src",
|
||||
"lint": "eslint --fix --ext .js,.vue src",
|
||||
"build": "node build/build.js",
|
||||
"doc:dev": "vuepress dev docs",
|
||||
"doc:build": "vuepress build docs"
|
||||
|
||||
@@ -1,5 +1,142 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
Hello
|
||||
<d2-container>
|
||||
<el-button-group slot="header">
|
||||
<el-button size="mini" @click="scrollRowTo(2)">跳转到第3行</el-button>
|
||||
<el-button size="mini" @click="scrollRowTo(Math.round(tableDataHandled.length * 0.8))">
|
||||
跳转到第{{Math.round(tableDataHandled.length * 0.8) + 1}}行
|
||||
</el-button>
|
||||
<el-button size="mini" @click="editCell">编辑第{{ editRow }}行第{{ editCol }}列</el-button>
|
||||
<el-button size="mini" @click="changeData(Math.round(Math.random() * 30000))">改变数据</el-button>
|
||||
<el-button size="mini" @click="changeDefaultSort">改变默认排序方式</el-button>
|
||||
</el-button-group>
|
||||
<h1 class="d2-mt-0">当前数据量 {{tableDataHandled.length}}</h1>
|
||||
<div class="wraper">
|
||||
<bigdata-table
|
||||
ref="table"
|
||||
v-model="tableDataHandled"
|
||||
:row-num="20"
|
||||
:col-num="7"
|
||||
show-index
|
||||
start-edit-type="dblclick"
|
||||
fixed
|
||||
stripe
|
||||
:col-width="200"
|
||||
:header-height="50"
|
||||
:can-edit="canEdit"
|
||||
:at-right-cell-posi="20"
|
||||
:at-left-cell-posi="40"
|
||||
:columns="columns"
|
||||
:index-render="indexRender"
|
||||
:fixed-col="0"
|
||||
:sort-index="2"
|
||||
:default-sort="defaultSort"
|
||||
selectable
|
||||
paste
|
||||
:beforeSave="beforeSave"
|
||||
:disabled-hover="false"
|
||||
@on-success-save="handleSuccessEdit"
|
||||
@on-fail-save="handleFailEdit"
|
||||
@on-moving-on-header="handleMoving"
|
||||
@on-click-tr="handleClickTr"
|
||||
@on-click-td="handleClickTd"/>
|
||||
</div>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
// 本页是由 https://github.com/lison16/vue-bigdata-table/blob/master/src/App.vue 修改而来
|
||||
// 由于原页面有太多的地方不符合本项目的代码规范,本页面不做代码检查
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
tableData: [],
|
||||
columns: [],
|
||||
tableDataHandled: [], // 带有数据的表格数据
|
||||
emptyData: [], // 空的表格数据
|
||||
canEdit: true,
|
||||
editRow: 1,
|
||||
editCol: 1,
|
||||
defaultSort: {1: 'down'}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
tableDataHandled (res) {
|
||||
// res
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
indexRender (h, index) {
|
||||
return h('div', {}, index + 1)
|
||||
},
|
||||
handleMoving (e) {
|
||||
// this.$log('handleMoving', e.atGivenArea + '......' + e.colIndex)
|
||||
},
|
||||
scrollRowTo (index) {
|
||||
this.$refs.table.scrollToRow(index)
|
||||
},
|
||||
handleClickTr (index) {
|
||||
this.$log('handleClickTr', index)
|
||||
},
|
||||
handleClickTd (params) {
|
||||
this.$log('handleClickTd', params)
|
||||
},
|
||||
clickEditBtn () {
|
||||
this.canEdit = !this.canEdit
|
||||
},
|
||||
beforeSave ({ row, col, value }) {
|
||||
return (row + 1) % 2
|
||||
},
|
||||
handleSuccessEdit ({ row, col, value, initRowIndex }) {
|
||||
this.$message(`第${initRowIndex + 1}行第${initRowIndex + 1}列改为${value}`)
|
||||
},
|
||||
handleFailEdit (res) {
|
||||
this.$message('偶数行不能编辑')
|
||||
},
|
||||
editCell () {
|
||||
this.$refs.table.editCell(this.editRow - 1, this.editCol - 1)
|
||||
},
|
||||
changeData (rowLen) {
|
||||
let dataArr = []
|
||||
for (let i = 0; i < rowLen; i++) {
|
||||
let arr = [
|
||||
i + '00',
|
||||
'count' + i,
|
||||
'23.4534534345',
|
||||
'0023' + i,
|
||||
'123.234534534534',
|
||||
'namenasdfsdfsdfsdfssdfsdfsdsdfsdfsf' + i,
|
||||
'2014年1月1日'
|
||||
]
|
||||
dataArr.push(arr)
|
||||
}
|
||||
this.tableDataHandled = dataArr
|
||||
},
|
||||
changeDefaultSort () {
|
||||
this.defaultSort = {2: 'up'}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.changeData(10000)
|
||||
let columns = ['这是数字', '这是字符1列', '这是纬度', '这是数字', '这是经度', '这是字符2列', '这是时间'].map((title, col) => {
|
||||
return {
|
||||
title: title,
|
||||
align: 'center'
|
||||
}
|
||||
})
|
||||
this.columns = columns
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.wraper{
|
||||
height: 400px;
|
||||
// position: absolute;
|
||||
// top: 0px;
|
||||
// right: 0px;
|
||||
// left: 0px;
|
||||
// right: 0px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -57,9 +57,7 @@
|
||||
<el-col :span="12"><el-card shadow="never"><d2-highlight slot="header" :code="`// 是否之后\ndayjs().isAfter(dayjs().add(1, 'day'))`"/>{{dayjs().isAfter(dayjs().add(1, 'day'))}}</el-card></el-col>
|
||||
<el-col :span="12"><el-card shadow="never"><d2-highlight slot="header" :code="`// 是否之后\ndayjs().isAfter(dayjs().subtract(1, 'day'))`"/>{{dayjs().isAfter(dayjs().subtract(1, 'day'))}}</el-card></el-col>
|
||||
</el-row>
|
||||
<template slot="footer">
|
||||
<d2-demo-link-btn title="依赖" link="https://github.com/iamkun/dayjs"/>
|
||||
</template>
|
||||
<d2-demo-link-btn slot="footer" title="依赖" link="https://github.com/iamkun/dayjs"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user