crm-uniapp/uni_modules/lh-table/changelog.md

1.2.8（2023-09-05）

新增选中的某行样式 新增统计列 <lh-table :rows="state.rows" :columns="state.columns" :showStatistics="true" @tapRow="tapRow" @tapToolbar="tapToolbar" @tapOper="tapOper" @refresh="refresh" @check="check" @checkAll="checkAll" @loadMore="loadMore"> <template #statistics="{row}"> {{ row.yj + row.amount }}

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、固定

1. 头
2. 列
3. 序号
4. 操作列
5. 勾选列

2、事件

1. 查看（操作列）
2. 删除（操作列）
3. 编辑（操作列）
4. 点击行数据
5. 上拉加载数据
6. 下来刷新数据

3、插槽

1. 数据列插槽（插槽名称通过colname判断）
2. 操作列插槽

4、工具栏

1. 新增
2. 删除（批量）

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、固定

1. 头
2. 列
3. 序号
4. 操作列
5. 勾选列

2、事件

1. 查看（操作列）
2. 删除（操作列）
3. 编辑（操作列）
4. 点击行数据
5. 上拉加载数据
6. 下来刷新数据

3、插槽

1. 数据列插槽（插槽名称通过colname判断）
2. 操作列插槽

4、工具栏

1. 新增
2. 删除（批量）

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、固定

1. 头
2. 列
3. 序号
4. 操作列
5. 勾选列

2、事件

1. 查看（操作列）
2. 删除（操作列）
3. 编辑（操作列）
4. 点击行数据
5. 上拉加载数据
6. 下来刷新数据

3、插槽

1. 数据列插槽（插槽名称通过colname判断）
2. 操作列插槽

4、工具栏

1. 新增
2. 删除（批量）

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、固定

1. 头
2. 列
3. 序号
4. 操作列

2、事件

1. 查看（操作列）
2. 删除（操作列）
3. 编辑（操作列）
4. 点击行数据
5. 上拉加载数据
6. 下来刷新数据

3、插槽

1. 数据列插槽（插槽名称通过colname判断）
2. 操作列插槽

代码

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）

修改默认值

1.0.0（2023-08-24）

发布

202-08-24

• 新增
  • 固定头
  • 固定列
  • 操作列
  • 行数据插槽
  • 操作列插槽
  • 行数据tabRow事件
  • 操作列tapOper事件
  • 下拉刷新refresh事件
  • 上拉加载loadMore事件