lh-table - 更新日志

1.2.8（2023-09-05）

新增选中的某行样式 新增统计列

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）

发布