mt-fe-group/cnbmai-ui-doc
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

勘误&table增加doLayout事件文档

Browse Source
This commit is contained in:
朱菊兰 2023-01-09 16:42:31 +08:00
parent 746654cd71
commit b063d60279
5 changed files with 60 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
package-lock.json generated
View File

@ -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",

2
package.json
View File

@ -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",

2
src/views/home/introduce.vue
View File

@ -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>

42
src/views/table/canBeEntered.vue
View File

@ -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 @@
/&gt;
&lt;<span>/template</span>&gt;
&lt;script&gt;
import inputArea from './components/InputArea.vue'
const tableProps = [
{
prop: 'testItems',
@ -101,6 +101,44 @@
}
}
&lt;/script&gt;
inputArea 参考代码：
&lt;template&gt;
&lt;div class="tableInner"&gt;
&lt;el-input v-model="list[itemProp]" @blur="changeInput" /&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
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)
}
}
}
&lt;/script&gt;
&lt;style scoped&gt;
.tableInner .el-input__inner {
border: none;
padding: 0;
height: 33px;
}
&lt;/style&gt;
</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 @@
/&gt;
&lt;<span>/template</span>&gt;
&lt;script&gt;
import inputArea from './components/InputArea.vue'
const tableProps = [
{
prop: 'testItems',

12
src/views/table/singleHead.vue
View File

@ -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>
&lt;<span>template</span>&gt;
&lt;base-table
ref="baseTable1"
id="baseTable"
:table-props="tableProps"
:page="1"
:limit="20"
@ -85,6 +90,11 @@
}]
}
}
},
methods: {
doLayout() {
this.$refs.baseTable1.doLayout('baseTable')
}
}
&lt;/script&gt;
</pre>
@ -93,7 +103,7 @@
</el-collapse>
</div>
<div class="demo-box">
<h3>带边框和斑马纹表格</h3>
<h3>不带边框和带斑马纹表格</h3>
<base-table
:table-props="tableProps"
:table-data="tableData"