sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

d2-crud 单选

Browse Source 
Former-commit-id: f77250d91b90e9dd3fdf374966c27936e5805e7a [formerly f77250d91b90e9dd3fdf374966c27936e5805e7a [formerly f77250d91b90e9dd3fdf374966c27936e5805e7a [formerly f77250d91b90e9dd3fdf374966c27936e5805e7a [formerly 5cced044ea5dda254eb1504a570e1b5b9afbb35e [formerly e0598d675e7026e265dcf4d5024f0f66ee9c1b39]]]]]
Former-commit-id: 40e5719db55936e37f14ce5266a14d5e91ef23af
Former-commit-id: c167dc8ab982f1ebf7ef6fcb6ee78c6ca15ed007
Former-commit-id: 193951ad3688cf7e83084340d1d7fe92acf906fa [formerly 74d1192239c08c93bbdffeb8b62e74aa85e3ae7f]
Former-commit-id: fef418d170b006fb8416483d8896d4904ffb2134
Former-commit-id: 25f655562db68b4eda7bdbaa0c859e755607ae91
Former-commit-id: ffcca2588cc1853f7e9ba3235029f05cc71ce8e3
Former-commit-id: 2f93b38bd00d10a693a49f872bb81164b4221378
Former-commit-id: 51fbad2adf326e2789d4aa1931a4a138fb2dacd1
This commit is contained in:
孙昊翔
2018-08-27 17:41:09 +08:00
parent 135c1360e0
commit b73ac2c400
13 changed files with 166 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/menu/modules/demo-d2-crud.js
View File

@@ -11,6 +11,7 @@ export default {
{ path: `${pre}demo5`, title: '固定表头' },
{ path: `${pre}demo6`, title: '固定列' },
{ path: `${pre}demo7`, title: '流体高度' },
{ path: `${pre}demo8`, title: '多级表头' }
{ path: `${pre}demo8`, title: '多级表头' },
{ path: `${pre}demo9`, title: '单选' }
])('/demo/d2-crud/')
}

2
src/pages/demo/d2-crud/demo1/doc.md
View File

@@ -1 +1 @@
在 `D2 Crud` 组件中传入 `columns` 和 `data` 对象数组，即可创建一个最基础的表格，可以在 `columns` 对象中传入 `width` 属性来控制列宽。代码如下：
在 `D2 Crud` 组件中传入 `columns` 和 `data` 对象数组，即可创建一个最基础的表格，可以在 `columns` 对象中传入 `width` 属性来控制列宽。代码如下：

2
src/pages/demo/d2-crud/demo2/doc.md
View File

@@ -1 +1 @@
`options` 对象可以对表格进行配置，其中 `stripe` 属性可以创建带斑马纹的表格。它接受一个 `Boolean` ，设置为 `true` 即为启用。代码如下：
`options` 对象可以对表格进行配置，其中 `stripe` 属性可以创建带斑马纹的表格。它接受一个 `Boolean` ，设置为 `true` 即为启用。代码如下：

2
src/pages/demo/d2-crud/demo3/doc.md
View File

@@ -1 +1 @@
默认情况下， `D2 Crud` 是不具有竖直方向的边框的，如果需要，可以在 `options` 对象中传入一个 `border` 属性，它接受一个 `Boolean` ，设置为 `true` 即可启用。代码如下：
默认情况下， `D2 Crud` 是不具有竖直方向的边框的，如果需要，可以在 `options` 对象中传入一个 `border` 属性，它接受一个 `Boolean` ，设置为 `true` 即可启用。代码如下：

2
src/pages/demo/d2-crud/demo4/doc.md
View File

@@ -1 +1 @@
可以通过指定 `D2 Crud` 组件 `options` 对象中的 `rowClassName` 属性来为 `D2 Crud` 中的某一行添加 `class` ，表明该行处于某种状态。代码如下：
可以通过指定 `D2 Crud` 组件 `options` 对象中的 `rowClassName` 属性来为 `D2 Crud` 中的某一行添加 `class` ，表明该行处于某种状态。代码如下：

2
src/pages/demo/d2-crud/demo5/doc.md
View File

@@ -1 +1 @@
只要在 `options` 对象中定义了 `height` 属性，即可实现固定表头的表格，而不需要额外的代码。代码如下：
只要在 `options` 对象中定义了 `height` 属性，即可实现固定表头的表格，而不需要额外的代码。代码如下：

2
src/pages/demo/d2-crud/demo6/doc.md
View File

@@ -1 +1 @@
固定列需要在 `columns` 对象数组中给需要固定的列传入 `fixed` 属性，它接受 `Boolean` 值或者 `left` `right` ，表示左边固定还是右边固定。代码如下：
固定列需要在 `columns` 对象数组中给需要固定的列传入 `fixed` 属性，它接受 `Boolean` 值或者 `left` `right` ，表示左边固定还是右边固定。代码如下：

2
src/pages/demo/d2-crud/demo7/doc.md
View File

@@ -1 +1 @@
通过在 `options` 对象设置 `maxHeight` 属性为 `D2 Crud` 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。代码如下：
通过在 `options` 对象设置 `maxHeight` 属性为 `D2 Crud` 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。代码如下：

2
src/pages/demo/d2-crud/demo8/doc.md
View File

@@ -1 +1 @@
数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系，只需在 `columns` 中使用 `children` 字段对子级表头进行嵌套即可。代码如下：
数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系，只需在 `columns` 中使用 `children` 字段对子级表头进行嵌套即可。代码如下：

64
src/pages/demo/d2-crud/demo9/code.js Normal file
View File

@@ -0,0 +1,64 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
:options="options"
index-row
@current-change="handleCurrentChange"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
title: '地址',
key: 'address'
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
],
options: {
highlightCurrentRow: true
}
}
},
methods: {
handleCurrentChange (currentRow, oldCurrentRow) {
console.log(currentRow)
console.log(oldCurrentRow)
}
}
}
</script>`

1
src/pages/demo/d2-crud/demo9/doc.md Normal file
View File

@@ -0,0 +1 @@
`D2 Crud` 组件提供了单选的支持，只需要在 `options` 对象中将 `highlightCurrentRow` 属性设为 `true` 即可实现单选。之后由 `current-change` 事件来管理选中时触发的事件，它会传入 `currentRow` 和 `oldCurrentRow`。如果需要显示索引，需要配置 `index-row` 属性。代码如下：

90
src/pages/demo/d2-crud/demo9/index.vue Normal file
View File

@@ -0,0 +1,90 @@
<template>
<d2-container>
<template slot="header">单选</template>
<d2-crud
:columns="columns"
:data="data"
:options="options"
index-row
@current-change="handleCurrentChange">
</d2-crud>
<el-card shadow="never" class="d2-mb">
<d2-markdown :source="doc"/>
</el-card>
<el-card shadow="never" class="d2-mb">
<d2-highlight :code="code"/>
</el-card>
<template slot="footer">
<d2-link-btn title="D2 CRUD" link="https://github.com/d2-projects/d2-crud"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import code from './code.js'
export default {
data () {
return {
doc,
code,
columns: [
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
title: '地址',
key: 'address'
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
],
options: {
highlightCurrentRow: true
}
}
},
methods: {
handleCurrentChange (currentRow, oldCurrentRow) {
console.log(currentRow)
console.log(oldCurrentRow)
}
}
}
</script>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>

2
src/router/routes.js.REMOVED.git-id
View File

@@ -1 +1 @@
1b0ae5476017971f2818adc72e8f78713e1a64f7
b8b55dc98d4d6c94c6fc66cd1e953f7637936ed4