lh-table - 更新日志
1.2.8(2023-09-05)
新增选中的某行样式 新增统计列
</lh-table>
</view>
1.2.7(2023-09-04)
修复固定列的格式化
1.2.6(2023-09-04)
去掉刷新,高度继承父容器
1.2.5(2023-09-04)
高度设置
1.2.4(2023-09-04)
将整体高度继承为如容器高度
1.2.3(2023-09-04)
1、删除·列插槽
2、新增·列格式化
<!-- 格式化列 -->
columns: [
{name: 'yjbl', title: '佣金比例', fixed: true},
{name: 'yj', title: '佣金', align: 'right'},
{name: 'amount', title: '消费金额', align: 'right'},
{name: 'user', title: '被邀请用户'},
{name: 'date', title: '消费时间', formate: data => data},
]
1.2.2(2023-08-24)
功能
1、固定
- 头
- 列
- 序号
- 操作列
- 勾选列
2、事件
- 查看(操作列)
- 删除(操作列)
- 编辑(操作列)
- 点击行数据
- 上拉加载数据
- 下来刷新数据
3、插槽
- 数据列插槽(插槽名称通过colname判断)
- 操作列插槽
4、工具栏
- 新增
- 删除(批量)
5、下标题
代码
view 代码块
<lh-table :rows="state.rows" :columns="state.columns" @tapRow="tapRow" @tapToolbar="tapToolbar" @tapOper="tapOper" @refresh="refresh" @check="check" @checkAll="checkAll" @loadMore="loadMore">
<template #yjbl="props">
{{props.row.yjbl}}
</template>
<template #yj="props">
{{props.row.yj}}
</template>
<template #operCol="props">
<!-- <text>新增</text> -->
</template>
</lh-table>
js 代码块
<!-- setup 语法 -->
import { reactive } from 'vue'
const state = reactive({
columns: [
{name: 'yjbl', title: '佣金比例', fixed: true},
{name: 'yj', title: '佣金', align: 'right'},
{name: 'amount', title: '消费金额', align: 'right'},
{name: 'user', title: '被邀请用户'},
{name: 'date', title: '消费时间'},
],
rows: [
{id: 0, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: '2023-08-23 10:00:25'},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 10000, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
]
})
const tapOper = data => {
console.log(data)
}
const tapRow = data => {
console.log(data);
}
const scroll = e => {
// console.log(e);
}
const loadMore = () => {
// state.rows = state.rows.concat([
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
// ])
}
const refresh = () => {
// state.rows = [
// {id: 0, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: '2023-08-23 10:00:25'},
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 10000, date: Date.now()},
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
// ]
}
const check = param => {
state.rows[param.index] = param.data
}
const checkAll = rows => {
state.rows = rows
}
const tapToolbar = btnName => {
console.log(btnName);
}
1.2.1(2023-08-24)
功能
1、固定
- 头
- 列
- 序号
- 操作列
- 勾选列
2、事件
- 查看(操作列)
- 删除(操作列)
- 编辑(操作列)
- 点击行数据
- 上拉加载数据
- 下来刷新数据
3、插槽
- 数据列插槽(插槽名称通过colname判断)
- 操作列插槽
4、工具栏
- 新增
- 删除(批量)
5、下标题
代码
view 代码块
<lh-table :rows="state.rows" :columns="state.columns" @tapRow="tapRow" @tapToolbar="tapToolbar" @tapOper="tapOper" @refresh="refresh" @check="check" @checkAll="checkAll" @loadMore="loadMore">
<template #yjbl="props">
{{props.row.yjbl}}
</template>
<template #yj="props">
{{props.row.yj}}
</template>
<template #operCol="props">
<!-- <text>新增</text> -->
</template>
</lh-table>
js 代码块
<!-- setup 语法 -->
import { reactive } from 'vue'
const state = reactive({
columns: [
{name: 'yjbl', title: '佣金比例', fixed: true},
{name: 'yj', title: '佣金', align: 'right'},
{name: 'amount', title: '消费金额', align: 'right'},
{name: 'user', title: '被邀请用户'},
{name: 'date', title: '消费时间'},
],
rows: [
{id: 0, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: '2023-08-23 10:00:25'},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 10000, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
]
})
const tapOper = data => {
console.log(data)
}
const tapRow = data => {
console.log(data);
}
const scroll = e => {
// console.log(e);
}
const loadMore = () => {
// state.rows = state.rows.concat([
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
// ])
}
const refresh = () => {
// state.rows = [
// {id: 0, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: '2023-08-23 10:00:25'},
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 10000, date: Date.now()},
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
// ]
}
const check = param => {
state.rows[param.index] = param.data
}
const checkAll = rows => {
state.rows = rows
}
const tapToolbar = btnName => {
console.log(btnName);
}
1.1.0(2023-08-24)
功能
1、固定
- 头
- 列
- 序号
- 操作列
- 勾选列
2、事件
- 查看(操作列)
- 删除(操作列)
- 编辑(操作列)
- 点击行数据
- 上拉加载数据
- 下来刷新数据
3、插槽
- 数据列插槽(插槽名称通过colname判断)
- 操作列插槽
4、工具栏
- 新增
- 删除(批量)
5、下标题
代码
view 代码块
<lh-table :rows="state.rows" :columns="state.columns" @tapRow="tapRow" @tapToolbar="tapToolbar" @tapOper="tapOper" @refresh="refresh" @check="check" @checkAll="checkAll" @loadMore="loadMore">
<template #yjbl="props">
{{props.row.yjbl}}
</template>
<template #yj="props">
{{props.row.yj}}
</template>
<template #operCol="props">
<!-- <text>新增</text> -->
</template>
</lh-table>
js 代码块
<!-- setup 语法 -->
import { reactive } from 'vue'
const state = reactive({
columns: [
{name: 'yjbl', title: '佣金比例', fixed: true},
{name: 'yj', title: '佣金', align: 'right'},
{name: 'amount', title: '消费金额', align: 'right'},
{name: 'user', title: '被邀请用户'},
{name: 'date', title: '消费时间'},
],
rows: [
{id: 0, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: '2023-08-23 10:00:25'},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 10000, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
]
})
const tapOper = data => {
console.log(data)
}
const tapRow = data => {
console.log(data);
}
const scroll = e => {
// console.log(e);
}
const loadMore = () => {
// state.rows = state.rows.concat([
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
// ])
}
const refresh = () => {
// state.rows = [
// {id: 0, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: '2023-08-23 10:00:25'},
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 10000, date: Date.now()},
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
// {id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
// ]
}
const check = param => {
state.rows[param.index] = param.data
}
const checkAll = rows => {
state.rows = rows
}
const tapToolbar = btnName => {
console.log(btnName);
}
1.0.2(2023-08-24)
功能
1、固定
- 头
- 列
- 序号
- 操作列
2、事件
- 查看(操作列)
- 删除(操作列)
- 编辑(操作列)
- 点击行数据
- 上拉加载数据
- 下来刷新数据
3、插槽
- 数据列插槽(插槽名称通过colname判断)
- 操作列插槽
代码
view 代码块
<lh-table :rows="state.rows" :columns="state.columns" @tapRow="tapRow" @tapOper="tapOper" @refresh="refresh" @loadMore="loadMore">
<template #yjbl="props">
{{props.row.yjbl}}
</template>
<template #yj="props">
{{props.row.yj}}
</template>
<template #operCol="props">
<text>新增</text>
</template>
</lh-table>
js 代码块
<!-- setup 语法 -->
import { reactive } from 'vue'
import LhTable from '../../components/lh-table/lh-table.vue'
const state = reactive({
columns: [
{name: 'yjbl', title: '佣金比例', fixed: true},
{name: 'yj', title: '佣金', align: 'right'},
{name: 'amount', title: '消费金额', align: 'right'},
{name: 'user', title: '被邀请用户'},
{name: 'date', title: '消费时间'},
],
rows: [
{id: 0, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: '2023-08-23 10:00:25'},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 10000, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
]
})
// 点击操作列按钮
const tapOper = data => {
console.log(data)
}
// 点击行
const tapRow = data => {
console.log(data);
}
// 模拟加载更多
const loadMore = () => {
state.rows = state.rows.concat([
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
])
}
// 模拟刷新数据
const refresh = () => {
state.rows = [
{id: 0, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: '2023-08-23 10:00:25'},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 10000, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
{id: 1, yjbl: '10%', yj: 10, user: 666666, amount: 100, date: Date.now()},
]
}
1.0.1(2023-08-24)
修改默认值