勘误&table增加doLayout事件文档 #5

Merged
juzi merged 1 commits from zjl into develop 2023-01-09 16:43:20 +08:00
5 changed files with 60 additions and 12 deletions

14
package-lock.json generated
View File

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

View File

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

View File

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

View File

@ -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 @@
/&gt; /&gt;
&lt;<span>/template</span>&gt; &lt;<span>/template</span>&gt;
&lt;script&gt; &lt;script&gt;
import inputArea from './components/InputArea.vue'
const tableProps = [ const tableProps = [
{ {
prop: 'testItems', prop: 'testItems',
@ -101,6 +101,44 @@
} }
} }
&lt;/script&gt; &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> </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 @@
/&gt; /&gt;
&lt;<span>/template</span>&gt; &lt;<span>/template</span>&gt;
&lt;script&gt; &lt;script&gt;
import inputArea from './components/InputArea.vue'
const tableProps = [ const tableProps = [
{ {
prop: 'testItems', prop: 'testItems',

View File

@ -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>
&lt;<span>template</span>&gt; &lt;<span>template</span>&gt;
&lt;base-table &lt;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')
}
} }
&lt;/script&gt; &lt;/script&gt;
</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"