勘误&table增加doLayout事件文档
Este cometimento está contido em:
ascendente
746654cd71
cometimento
b063d60279
14
package-lock.json
gerado
14
package-lock.json
gerado
@ -8,7 +8,7 @@
|
||||
"name": "code-brick-wd",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"code-brick-zj": "^0.0.5",
|
||||
"code-brick-zj": "^0.0.6",
|
||||
"core-js": "^3.8.3",
|
||||
"element-ui": "^2.15.12",
|
||||
"vue": "^2.6.14",
|
||||
@ -4007,9 +4007,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/code-brick-zj": {
|
||||
"version": "0.0.5",
|
||||
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.5.tgz",
|
||||
"integrity": "sha512-wvHr8EFznEkIAi9BaXGZbNRRTa+18yBVH5yyuYaaAqiXW7WINbEiFkgMqRqVmRldPNbKXIHkbsGnX+Zk6dI/nA=="
|
||||
"version": "0.0.6",
|
||||
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.6.tgz",
|
||||
"integrity": "sha512-8Wdr0J4v7zfmOLhG1fvDi5rPSkFB5r/onwi1GFdIZyiSwl5Xia61df11OdCFP8cPksL2hATiTTWs6WU/6s/cxA=="
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "1.9.3",
|
||||
@ -14473,9 +14473,9 @@
|
||||
}
|
||||
},
|
||||
"code-brick-zj": {
|
||||
"version": "0.0.5",
|
||||
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.5.tgz",
|
||||
"integrity": "sha512-wvHr8EFznEkIAi9BaXGZbNRRTa+18yBVH5yyuYaaAqiXW7WINbEiFkgMqRqVmRldPNbKXIHkbsGnX+Zk6dI/nA=="
|
||||
"version": "0.0.6",
|
||||
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.6.tgz",
|
||||
"integrity": "sha512-8Wdr0J4v7zfmOLhG1fvDi5rPSkFB5r/onwi1GFdIZyiSwl5Xia61df11OdCFP8cPksL2hATiTTWs6WU/6s/cxA=="
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "1.9.3",
|
||||
|
@ -8,7 +8,7 @@
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"code-brick-zj": "^0.0.5",
|
||||
"code-brick-zj": "^0.0.6",
|
||||
"core-js": "^3.8.3",
|
||||
"element-ui": "^2.15.12",
|
||||
"vue": "^2.6.14",
|
||||
|
@ -3,7 +3,7 @@
|
||||
<p>
|
||||
组件包目前封装常用的四个组件:表格,搜索区域,分页,对话框。包npm地址为:https://www.npmjs.com/package/code-brick-zj。
|
||||
</p>
|
||||
<p>文档当前使用的组件包的版本为:0.0.5</p>
|
||||
<p>文档当前使用的组件包的版本为:0.0.6</p>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
@ -4,7 +4,6 @@
|
||||
<div class="demo-box">
|
||||
<h3>表格内嵌输入框</h3>
|
||||
<base-table
|
||||
border
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData"
|
||||
@emitFun="inputChange"
|
||||
@ -26,6 +25,7 @@
|
||||
/>
|
||||
<<span>/template</span>>
|
||||
<script>
|
||||
import inputArea from './components/InputArea.vue'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'testItems',
|
||||
@ -101,6 +101,44 @@
|
||||
}
|
||||
}
|
||||
</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>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
@ -109,7 +147,6 @@
|
||||
<div class="demo-box">
|
||||
<h3>表格底部新增按钮</h3>
|
||||
<base-table
|
||||
border
|
||||
:table-props="tableProps2"
|
||||
:table-data="tableData2"
|
||||
:add-button-show="addButtonShow"
|
||||
@ -134,6 +171,7 @@
|
||||
/>
|
||||
<<span>/template</span>>
|
||||
<script>
|
||||
import inputArea from './components/InputArea.vue'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'testItems',
|
||||
|
@ -17,11 +17,16 @@
|
||||
第一列的图标可以控制表格列的显示和隐藏。序号列的宽度可以自定义,默认为70,参数为<code>pageWidth</code>,类型为<code
|
||||
>Number</code
|
||||
>
|
||||
默认序号列是左侧固定的,如果需要取消固定可以传入参数<code>cancelPageFixed</code>值为<code>true</code>,elementUI提供了<code>doLayout</code>函数,对
|
||||
Table 进行重新布局。当 Table
|
||||
或其祖先元素由隐藏切换为显示时,可能需要调用此方法,具体用法如下demo
|
||||
</div>
|
||||
<div>
|
||||
<pre>
|
||||
<<span>template</span>>
|
||||
<base-table
|
||||
ref="baseTable1"
|
||||
id="baseTable"
|
||||
:table-props="tableProps"
|
||||
:page="1"
|
||||
:limit="20"
|
||||
@ -85,6 +90,11 @@
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doLayout() {
|
||||
this.$refs.baseTable1.doLayout('baseTable')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</pre>
|
||||
@ -93,7 +103,7 @@
|
||||
</el-collapse>
|
||||
</div>
|
||||
<div class="demo-box">
|
||||
<h3>带边框和斑马纹表格</h3>
|
||||
<h3>不带边框和带斑马纹表格</h3>
|
||||
<base-table
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData"
|
||||
|
Carregando…
Criar uma nova questão referindo esta
Bloquear um utilizador