勘误&table增加doLayout事件文档 #5
14
package-lock.json
generated
14
package-lock.json
generated
@ -8,7 +8,7 @@
|
|||||||
"name": "code-brick-wd",
|
"name": "code-brick-wd",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"code-brick-zj": "^0.0.5",
|
"code-brick-zj": "^0.0.6",
|
||||||
"core-js": "^3.8.3",
|
"core-js": "^3.8.3",
|
||||||
"element-ui": "^2.15.12",
|
"element-ui": "^2.15.12",
|
||||||
"vue": "^2.6.14",
|
"vue": "^2.6.14",
|
||||||
@ -4007,9 +4007,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/code-brick-zj": {
|
"node_modules/code-brick-zj": {
|
||||||
"version": "0.0.5",
|
"version": "0.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.5.tgz",
|
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.6.tgz",
|
||||||
"integrity": "sha512-wvHr8EFznEkIAi9BaXGZbNRRTa+18yBVH5yyuYaaAqiXW7WINbEiFkgMqRqVmRldPNbKXIHkbsGnX+Zk6dI/nA=="
|
"integrity": "sha512-8Wdr0J4v7zfmOLhG1fvDi5rPSkFB5r/onwi1GFdIZyiSwl5Xia61df11OdCFP8cPksL2hATiTTWs6WU/6s/cxA=="
|
||||||
},
|
},
|
||||||
"node_modules/color-convert": {
|
"node_modules/color-convert": {
|
||||||
"version": "1.9.3",
|
"version": "1.9.3",
|
||||||
@ -14473,9 +14473,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"code-brick-zj": {
|
"code-brick-zj": {
|
||||||
"version": "0.0.5",
|
"version": "0.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.5.tgz",
|
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.6.tgz",
|
||||||
"integrity": "sha512-wvHr8EFznEkIAi9BaXGZbNRRTa+18yBVH5yyuYaaAqiXW7WINbEiFkgMqRqVmRldPNbKXIHkbsGnX+Zk6dI/nA=="
|
"integrity": "sha512-8Wdr0J4v7zfmOLhG1fvDi5rPSkFB5r/onwi1GFdIZyiSwl5Xia61df11OdCFP8cPksL2hATiTTWs6WU/6s/cxA=="
|
||||||
},
|
},
|
||||||
"color-convert": {
|
"color-convert": {
|
||||||
"version": "1.9.3",
|
"version": "1.9.3",
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"code-brick-zj": "^0.0.5",
|
"code-brick-zj": "^0.0.6",
|
||||||
"core-js": "^3.8.3",
|
"core-js": "^3.8.3",
|
||||||
"element-ui": "^2.15.12",
|
"element-ui": "^2.15.12",
|
||||||
"vue": "^2.6.14",
|
"vue": "^2.6.14",
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
<p>
|
<p>
|
||||||
组件包目前封装常用的四个组件:表格,搜索区域,分页,对话框。包npm地址为:https://www.npmjs.com/package/code-brick-zj。
|
组件包目前封装常用的四个组件:表格,搜索区域,分页,对话框。包npm地址为:https://www.npmjs.com/package/code-brick-zj。
|
||||||
</p>
|
</p>
|
||||||
<p>文档当前使用的组件包的版本为:0.0.5</p>
|
<p>文档当前使用的组件包的版本为:0.0.6</p>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
@ -4,7 +4,6 @@
|
|||||||
<div class="demo-box">
|
<div class="demo-box">
|
||||||
<h3>表格内嵌输入框</h3>
|
<h3>表格内嵌输入框</h3>
|
||||||
<base-table
|
<base-table
|
||||||
border
|
|
||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:table-data="tableData"
|
:table-data="tableData"
|
||||||
@emitFun="inputChange"
|
@emitFun="inputChange"
|
||||||
@ -26,6 +25,7 @@
|
|||||||
/>
|
/>
|
||||||
<<span>/template</span>>
|
<<span>/template</span>>
|
||||||
<script>
|
<script>
|
||||||
|
import inputArea from './components/InputArea.vue'
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
prop: 'testItems',
|
prop: 'testItems',
|
||||||
@ -101,6 +101,44 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
inputArea 参考代码:
|
||||||
|
<template>
|
||||||
|
<div class="tableInner">
|
||||||
|
<el-input v-model="list[itemProp]" @blur="changeInput" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'InputArea',
|
||||||
|
props: {
|
||||||
|
injectData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
itemProp: {
|
||||||
|
type: String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: this.injectData
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeInput() {
|
||||||
|
console.log(this.list)
|
||||||
|
this.$emit('emitData', this.list)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.tableInner .el-input__inner {
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
height: 33px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
@ -109,7 +147,6 @@
|
|||||||
<div class="demo-box">
|
<div class="demo-box">
|
||||||
<h3>表格底部新增按钮</h3>
|
<h3>表格底部新增按钮</h3>
|
||||||
<base-table
|
<base-table
|
||||||
border
|
|
||||||
:table-props="tableProps2"
|
:table-props="tableProps2"
|
||||||
:table-data="tableData2"
|
:table-data="tableData2"
|
||||||
:add-button-show="addButtonShow"
|
:add-button-show="addButtonShow"
|
||||||
@ -134,6 +171,7 @@
|
|||||||
/>
|
/>
|
||||||
<<span>/template</span>>
|
<<span>/template</span>>
|
||||||
<script>
|
<script>
|
||||||
|
import inputArea from './components/InputArea.vue'
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
prop: 'testItems',
|
prop: 'testItems',
|
||||||
|
@ -17,11 +17,16 @@
|
|||||||
第一列的图标可以控制表格列的显示和隐藏。序号列的宽度可以自定义,默认为70,参数为<code>pageWidth</code>,类型为<code
|
第一列的图标可以控制表格列的显示和隐藏。序号列的宽度可以自定义,默认为70,参数为<code>pageWidth</code>,类型为<code
|
||||||
>Number</code
|
>Number</code
|
||||||
>
|
>
|
||||||
|
默认序号列是左侧固定的,如果需要取消固定可以传入参数<code>cancelPageFixed</code>值为<code>true</code>,elementUI提供了<code>doLayout</code>函数,对
|
||||||
|
Table 进行重新布局。当 Table
|
||||||
|
或其祖先元素由隐藏切换为显示时,可能需要调用此方法,具体用法如下demo
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<pre>
|
<pre>
|
||||||
<<span>template</span>>
|
<<span>template</span>>
|
||||||
<base-table
|
<base-table
|
||||||
|
ref="baseTable1"
|
||||||
|
id="baseTable"
|
||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:page="1"
|
:page="1"
|
||||||
:limit="20"
|
:limit="20"
|
||||||
@ -85,6 +90,11 @@
|
|||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
doLayout() {
|
||||||
|
this.$refs.baseTable1.doLayout('baseTable')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</pre>
|
</pre>
|
||||||
@ -93,7 +103,7 @@
|
|||||||
</el-collapse>
|
</el-collapse>
|
||||||
</div>
|
</div>
|
||||||
<div class="demo-box">
|
<div class="demo-box">
|
||||||
<h3>带边框和斑马纹表格</h3>
|
<h3>不带边框和带斑马纹表格</h3>
|
||||||
<base-table
|
<base-table
|
||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:table-data="tableData"
|
:table-data="tableData"
|
||||||
|
Loading…
Reference in New Issue
Block a user