# 基本使用
此排序仅可点击图标才生效
- 10条/页
- 20条/页
- 50条/页
- 100条/页
无数据
<template>
<div class="t-table" style="width:100%;">
<t-table onlyIconSort title="此排序仅可点击图标才生效" :table="table" :columns="columns" size="mini" />
</div>
</template>
<script>
export default {
data() {
let self = this
return {
table: {
data: [
{
id: '1',
date: '2019-09-25',
name: '张三',
status: '2',
address: '广东省广州市天河区'
},
{
id: '2',
date: '2019-09-26',
name: '张三1',
status: '1',
address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2'
},
{
id: '3',
date: '2019-09-27',
name: '张三2',
status: '3',
address: '广东省广州市天河区3'
}
]
},
columns: [
{ prop: 'name', label: '姓名', minWidth: '100', sort: true },
{ prop: 'date', label: '日期', minWidth: '180', sort: true },
{ prop: 'address', label: '地址', minWidth: '220', sort: true, noShowTip: true },
{ prop: 'date', label: '日期', minWidth: '180', sort: true },
{
prop: 'address', label: '地址', minWidth: '220',
customRender: {
comps: [
{
comp: 'el-link',
text: '编辑',
bind: {
type: 'primary'
},
event(scope) {
return {
click() {
self.handleEditTable('编辑', scope.row)
}
}
}
},
{
comp: 'el-popconfirm',
bind: {
title: '确认删除该条数据?'
},
event(scope) {
return {
confirm() {
self.handledeleteTable(scope.row)
}
}
},
child: [
{
slot: 'reference',
comp: 'el-link',
text: '删除',
bind: {
type: 'primary'
}
}
]
}
]
}
}
]
}
},
methods: {
handleEditTable(val, type) {
console.log('编辑', val, type)
},
handledeleteTable(val) {
console.log('删除', val)
}
}
}
</script>
显示代码
wocwin微信二维码
# 双击单元格复制
- 10条/页
- 20条/页
- 50条/页
- 100条/页
无数据
在组件中需配置
新增isCopy
或isCopy='true'
属性
<template>
<div class="t-table" style="width:100%;">
<t-table :table="table" :columns="columns" isCopy />
</div>
</template>
<script>
export default {
data() {
return {
table: {
data: [
{
id: '1',
date: '2019-09-25',
name: '张三',
status: '2',
address: '广东省广州市天河区'
},
{
id: '2',
date: '2019-09-26',
name: '张三1',
status: '1',
address: '广东省广州市天广东省广州市天河区2广东省广州市天广东省广州市天河区2'
},
{
id: '3',
date: '2019-09-27',
name: '张三2',
status: '3',
address: '广东省广州市天河区3'
}
]
},
columns: [
{ prop: 'name', label: '姓名', minWidth: '100', sort: true },
{ prop: 'date', label: '日期', minWidth: '180', sort: true },
{ prop: 'address', label: '地址', minWidth: '220', sort: true, allShow: true },
{ prop: 'date', label: '日期', minWidth: '180', sort: true },
{ prop: 'address', label: '地址', minWidth: '220' }
]
}
}
}
</script>
显示代码
wocwin微信二维码
# 文字变色
- 10条/页
- 20条/页
- 50条/页
- 100条/页
无数据
在组件中需配置
changeColor
对象
<template>
<div class="t-table" style="width:100%;">
<t-table :table="table" :columns="columns" />
</div>
</template>
<script>
export default {
data () {
return {
table: {
data: [
{
id: '1',
date: '2019-09-25',
name: '张三',
status: '2',
address: '广东省广州市天河区'
},
{
id: '2',
date: '2019-09-26',
name: '张三1',
status: '1',
address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2'
},
{
id: '3',
date: '2019-09-27',
name: '张三2',
status: '3',
address: '广东省广州市天河区3'
}
],
// 状态值为3时,文字变色
changeColor: { key: 'status', val: '3', txtStyle: '#ef473a' }
},
columns: [
{ prop: 'name', label: '姓名', minWidth: '100' , noShowColumn: true },
{ prop: 'date', label: '日期', minWidth: '180' , noShowColumn: true },
{ prop: 'address', label: '地址', minWidth: '220' , noShowColumn: true },
{ prop: 'date', label: '日期', minWidth: '180' , noShowColumn: true },
{ prop: 'address', label: '地址', minWidth: '220' , noShowColumn: true }
],
}
}
}
</script>
显示代码
wocwin微信二维码