el-table
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[Vue]]
&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents
* 概要 [#ye5ca614]
prop 属性对应对象中的键名，用来填充数据；label 属性定义表...
#codeprettify{{
<template>
<el-table :data="tableData" class="data_table">
<el-table-column prop="number" label="编号" width="18...
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="info" label="描述">
</el-table-column>
</el-table>
</template>
}}
#codeprettify{{
data () {
return {
tableData: [{
number: '2016001',
name: '小明',
info: '这是第一条数据'
}, {
number: '2016002',
name: '小明',
info: '这是第二条数据'
}, {
number: '2016003',
name: '小明',
info: '这是第三条数据'
}, {
number: '2016004',
name: '小明',
info: '这是第四条数据'
}, {
number: '2016005',
name: '小明',
info: '这是第五条数据'
}]
}
}
}}
* 显示格式 [#s8a69e88]
#codeprettify{{
<el-table-column
prop="endTime"
label="时间"
width="90"
:formatter="formatDate">
</el-table-column>
}}
#codeprettify{{
methods: {
formatDate(row, column) {
// 获取单元格数据
let data = row[column.property]
if(data == null) {
return null
}
let dt = new Date(data)
return dt.getFullYear() + '/' + (dt.getMonth() +...
},
}
}}
* Tips [#j0e407af]
** 设置表格全部展开 [#w3ba74ac]
element-ui 中 el-table-column 里面设置 type="expand" 可设...
#codeprettify{{
<el-table :default-expand-all="true">
<el-table-column type="expand">
...
}}
** 设置有数据的行打开下拉 [#k7a291e1]
需要在table绑定两个属性
expand-row-key="expand" 和 row-key="method" method 里面...
** 超过长度显示省略号 [#w0c7798d]
#codeprettify{{
<el-table-column prop="note" label="备注">
<template slot-scope="scope">
<span style="display: block; overflow: hidden; text-o...
\{\{ scope.row.note \}\}
</span>
</template>
</el-table-column>
}}
- white-space:nowrap;/强制单行显示/
- text-overflow:ellipsis;/超出部分省略号表示/
- overflow:hidden;/超出部分隐藏/
- width: 120px;/设置显示的最大宽度/
- display:block;就是将元素显示为块级元素。
** expand 类型 [#v4c6dd20]
全部展开/折叠
#codeprettify{{
//按钮
<el-button size="mini" @click="btnExpand" style="margin-t...
<el-table ref="ctab"
>... 省略 ...
</el-table>
data() {
return {
isExpand: false,
}
method(){
btnExpand() {
this.actionUnfoldFunc(!this.isExpand);
}, //btnExpand
actionUnfoldFunc(isAss) {
this.handleExpand(isAss);
},
handleExpand(isAss) {
// 此判断是否为展开状态或折叠状态--若展开折叠是同一...
if (this.isExpand == isAss) {
return;
}
this.isExpand = !this.isExpand;
// this.data为返回的二级数据data
this.$nextTick(() => {
this.forArr(this.data, this.isExpand);
});
}, //handleExpand
// 遍历
forArr(arr, isExpand) {
arr.forEach((i) => {
// toggleRowExpansion见element文档
this.$refs.ctab.toggleRowExpansion(i, isExpand);
if (i.children) {
this.forArr(i.children, isExpand);
}
});
}, //forArr
}
}}
** 动态渲染列 [#d5001095]
使用 v-for
简单的
#codeprettify{{
<el-table style="width: 100%" border :data="tableData">
<template v-for="(item,index) in DataList">
<el-table-column :prop="item.column_name" :label="ite...
</template>
</el-table>
}}
复杂的，里面带一个 el-input 控件的
#codeprettify{{
<template v-for="(pt, index) in list">
<el-table-column :prop="pt.Name" :label="pt.Name" :key=...
<template slot-scope="scope">
<el-input v-model="scope.row[pt.Value * 1]" placeho...
</template>
</el-table-column>
</template>
}}
** 行点击事件 [#w04d110d]
配合 highlight-current-row 和 setCurrentRow 使用可以将点...
#codeprettify{{
<el-table ref="aaTable"
@row-click="rowClick"
v-loading="loading"
highlight-current-row
:data="dataList">
</el-table>
method:{
rowClick(row){
this.$refs.aaTable.setCurrentRow(row);
console.log(row)
},
}
}}
** 自定义空数据的插槽（未验证） [#zf6b42ea]
#codeprettify{{
<template slot="empty" v-if="slot.row.children.length == ...
<span>empty</span>
</template>
}}
** 自定义列头 [#e367ff91]
#codeprettify{{
<el-table-column label="数量" prop="backCount" width="100">
<template slot-scope="scope">
<el-input v-model="scope.row.Count" :disabled="true" ...
</template>
<template v-slot:header>
<el-tooltip content="我是一个数量" placement="top-end...
<i class="el-icon-warning-outline"></i>
</el-tooltip>
<span>数量</span>
</template>
</el-table-column>
}}
#hr();
コメント：
#comment_kcaptcha
終了行:
[[Vue]]
&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents
* 概要 [#ye5ca614]
prop 属性对应对象中的键名，用来填充数据；label 属性定义表...
#codeprettify{{
<template>
<el-table :data="tableData" class="data_table">
<el-table-column prop="number" label="编号" width="18...
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="info" label="描述">
</el-table-column>
</el-table>
</template>
}}
#codeprettify{{
data () {
return {
tableData: [{
number: '2016001',
name: '小明',
info: '这是第一条数据'
}, {
number: '2016002',
name: '小明',
info: '这是第二条数据'
}, {
number: '2016003',
name: '小明',
info: '这是第三条数据'
}, {
number: '2016004',
name: '小明',
info: '这是第四条数据'
}, {
number: '2016005',
name: '小明',
info: '这是第五条数据'
}]
}
}
}}
* 显示格式 [#s8a69e88]
#codeprettify{{
<el-table-column
prop="endTime"
label="时间"
width="90"
:formatter="formatDate">
</el-table-column>
}}
#codeprettify{{
methods: {
formatDate(row, column) {
// 获取单元格数据
let data = row[column.property]
if(data == null) {
return null
}
let dt = new Date(data)
return dt.getFullYear() + '/' + (dt.getMonth() +...
},
}
}}
* Tips [#j0e407af]
** 设置表格全部展开 [#w3ba74ac]
element-ui 中 el-table-column 里面设置 type="expand" 可设...
#codeprettify{{
<el-table :default-expand-all="true">
<el-table-column type="expand">
...
}}
** 设置有数据的行打开下拉 [#k7a291e1]
需要在table绑定两个属性
expand-row-key="expand" 和 row-key="method" method 里面...
** 超过长度显示省略号 [#w0c7798d]
#codeprettify{{
<el-table-column prop="note" label="备注">
<template slot-scope="scope">
<span style="display: block; overflow: hidden; text-o...
\{\{ scope.row.note \}\}
</span>
</template>
</el-table-column>
}}
- white-space:nowrap;/强制单行显示/
- text-overflow:ellipsis;/超出部分省略号表示/
- overflow:hidden;/超出部分隐藏/
- width: 120px;/设置显示的最大宽度/
- display:block;就是将元素显示为块级元素。
** expand 类型 [#v4c6dd20]
全部展开/折叠
#codeprettify{{
//按钮
<el-button size="mini" @click="btnExpand" style="margin-t...
<el-table ref="ctab"
>... 省略 ...
</el-table>
data() {
return {
isExpand: false,
}
method(){
btnExpand() {
this.actionUnfoldFunc(!this.isExpand);
}, //btnExpand
actionUnfoldFunc(isAss) {
this.handleExpand(isAss);
},
handleExpand(isAss) {
// 此判断是否为展开状态或折叠状态--若展开折叠是同一...
if (this.isExpand == isAss) {
return;
}
this.isExpand = !this.isExpand;
// this.data为返回的二级数据data
this.$nextTick(() => {
this.forArr(this.data, this.isExpand);
});
}, //handleExpand
// 遍历
forArr(arr, isExpand) {
arr.forEach((i) => {
// toggleRowExpansion见element文档
this.$refs.ctab.toggleRowExpansion(i, isExpand);
if (i.children) {
this.forArr(i.children, isExpand);
}
});
}, //forArr
}
}}
** 动态渲染列 [#d5001095]
使用 v-for
简单的
#codeprettify{{
<el-table style="width: 100%" border :data="tableData">
<template v-for="(item,index) in DataList">
<el-table-column :prop="item.column_name" :label="ite...
</template>
</el-table>
}}
复杂的，里面带一个 el-input 控件的
#codeprettify{{
<template v-for="(pt, index) in list">
<el-table-column :prop="pt.Name" :label="pt.Name" :key=...
<template slot-scope="scope">
<el-input v-model="scope.row[pt.Value * 1]" placeho...
</template>
</el-table-column>
</template>
}}
** 行点击事件 [#w04d110d]
配合 highlight-current-row 和 setCurrentRow 使用可以将点...
#codeprettify{{
<el-table ref="aaTable"
@row-click="rowClick"
v-loading="loading"
highlight-current-row
:data="dataList">
</el-table>
method:{
rowClick(row){
this.$refs.aaTable.setCurrentRow(row);
console.log(row)
},
}
}}
** 自定义空数据的插槽（未验证） [#zf6b42ea]
#codeprettify{{
<template slot="empty" v-if="slot.row.children.length == ...
<span>empty</span>
</template>
}}
** 自定义列头 [#e367ff91]
#codeprettify{{
<el-table-column label="数量" prop="backCount" width="100">
<template slot-scope="scope">
<el-input v-model="scope.row.Count" :disabled="true" ...
</template>
<template v-slot:header>
<el-tooltip content="我是一个数量" placement="top-end...
<i class="el-icon-warning-outline"></i>
</el-tooltip>
<span>数量</span>
</template>
</el-table-column>
}}
#hr();
コメント：
#comment_kcaptcha
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
