th-table 表格 支持自定义按钮插槽 排序 固定多列 - 更新日志
1.0.9（2023-12-29）
修复排序样式
1.0.8（2023-12-29）
新增默认暂无数据图片显示
1.0.7（2023-12-29）
1.修复table最低宽度限制。 2.新增暂无数据图片显示。
1.0.6（2023-12-12）
修复h5排序显示问题；新增表头，表身字体大小。
1.0.5（2023-12-11）
修复单元格默认数据默认显示
1.0.4（2023-12-06）
修复没有tdClick点击后报错问题
1.0.3（2023-12-06）
修改示例工程
1.0.2（2023-12-06）
修改文档
1.0.1（2023-12-06）
<template>
<view>
<!-- height 单元格高度 border 是否带有纵向边框 type值为type="selection" 时开启多选 loading显示加载中(默认false) emptyText 空数据时显示的文本内容-->
<th-table :column="column" :listData="data" :checkSort="checkSort" :st="st" :sr="sr" :tdClick="tdClick" height="0.5" :stripe="true" :border="true" :loading="false">
<!-- 具名作用域插槽 #后面写column里slot的值 -->
<template #AMOUNT="Props">
<!-- 子组件传递的参数 整个item -->
<span style="color: red;">{{ Props.item.AMOUNT }}</span>
</template>
<template #SHARES_NUM="Props">
<span style="color: green;" @click="log(Props.item)">{{ Props.item.SHARES_NUM }}</span>
</template>
<template #a="Props">
<div style="color: pink;">{{ Props.item.SECURITY_NAME }}</div>
<div>{{ Props.item.SECURITY_CODE }}</div>
</template>
</th-table>
</view>
</template>// 自定义插槽单元格点击事件
const log = (item) => {
console.log(item)
}
import { ref } from 'vue'
// 表头配置参数
const column = ref([
{
title: '名称/代码',// th标题
isSort: false, // 是否可排序
isFixed: true, // 是否固定
key: 'SECURITY_NAME',// 对应字段，
width: 3, // 宽度 width * 100 rpx,
slot: 'a'
},
{
title: '股份金额(万)',// th标题
isSort: true, // 是否可排序
isFixed: false, // 是否固定
key: 'AMOUNT', // 对应字段
slot: 'AMOUNT' // 插槽名
},
{
title: '股份数量(股)',// th标题
isSort: true, // 是否可排序
isFixed: false, // 是否固定
key: 'SHARES_NUM', // 对应字段
slot: 'SHARES_NUM' // 插槽名
},
{
title: '增减持均价(元)',// th标题
isSort: false, // 是否可排序
isFixed: false, // 是否固定
key: 'CHANGE_AVG_PRICE'
},
{
title: '最新价(元)',// th标题
isSort: false, // 是否可排序
isFixed: false, // 是否固定
key: 'f2'
},
{
title: '涨跌幅',// th标题
isSort: true, // 是否可排序
isFixed: false, // 是否固定
key: 'f3'
},
])
// 表身数据
const data = ref([])
// 排序字段
const st = ref('AMOUNT')
// sr 排序 1降序 -1升序
const sr = ref(-1)
// 切换排序事件 name:column里面的key type 排序 1降序 -1 升序
const checkSort = (name, type) => {
console.log(1);
st.value = name
sr.value = type
}
// 行点击事件 可不传 默认参数: 整行数据
const tdClick = (item) => {
console.log(item);
}
// 模拟请求数据
setTimeout(() => {
data.value = [
{
"SECURITY_CODE": "600521",
"DERIVE_SECURITY_CODE": "600521.SH",
"SECURITY_NAME": "华海药业",
"AMOUNT": "4444.26",
"SHARES_NUM": "285.00万",
"CHANGE_AVG_PRICE": "15.59",
"f14": "华海药业",
"f2": "15.39",
"f3": 0.79,
"tagid": "14013",
"tagname": "抗肿瘤创新药"
},
{
"SECURITY_CODE": "600817",
"DERIVE_SECURITY_CODE": "600817.SH",
"SECURITY_NAME": "宇通重工",
"AMOUNT": "4199.74",
"SHARES_NUM": "438.92万",
"CHANGE_AVG_PRICE": "9.57",
"f14": "宇通重工",
"f2": "9.75",
"f3": 0.31,
"tagid": "9148",
"tagname": "矿用车"
},
{
"SECURITY_CODE": "300896",
"DERIVE_SECURITY_CODE": "300896.SZ",
"SECURITY_NAME": "爱美客",
"AMOUNT": "3948.31",
"SHARES_NUM": "12.01万",
"CHANGE_AVG_PRICE": "328.75",
"f14": "爱美客",
"f2": "282.46",
"f3": 1.72,
"tagid": "18944",
"tagname": "医美产业链"
},
{
"SECURITY_CODE": "601619",
"DERIVE_SECURITY_CODE": "601619.SH",
"SECURITY_NAME": "嘉泽新能",
"AMOUNT": "3519.69",
"SHARES_NUM": "984.06万",
"CHANGE_AVG_PRICE": "3.58",
"f14": "嘉泽新能",
"f2": "3.44",
"f3": 0.29,
"tagid": "19586"
},
{
"SECURITY_CODE": "002408",
"DERIVE_SECURITY_CODE": "002408.SZ",
"SECURITY_NAME": "齐翔腾达",
"AMOUNT": "2813.75",
"SHARES_NUM": "484.23万",
"CHANGE_AVG_PRICE": "5.81",
"f14": "齐翔腾达",
"f2": "5.39",
"f3": 0.37,
"tagid": "2066",
"tagname": "混合丁烷"
},
{
"SECURITY_CODE": "002234",
"DERIVE_SECURITY_CODE": "002234.SZ",
"SECURITY_NAME": "民和股份",
"AMOUNT": "1500.02",
"SHARES_NUM": "113.04万",
"CHANGE_AVG_PRICE": "13.27",
"f14": "民和股份",
"f2": "13.65",
"f3": 5.57,
"tagid": "19069",
"tagname": "肉鸡饲养"
},
{
"SECURITY_CODE": "688786",
"DERIVE_SECURITY_CODE": "688786.SH",
"SECURITY_NAME": "悦安新材",
"AMOUNT": "1410.05",
"SHARES_NUM": "31.99万",
"CHANGE_AVG_PRICE": "44.08",
"f14": "悦安新材",
"f2": "43.80",
"f3": 1.22,
"tagid": "12297",
"tagname": "深加工"
},
{
"SECURITY_CODE": "002867",
"DERIVE_SECURITY_CODE": "002867.SZ",
"SECURITY_NAME": "周大生",
"AMOUNT": "1292.14",
"SHARES_NUM": "86.14万",
"CHANGE_AVG_PRICE": "15.00",
"f14": "周大生",
"f2": "15.54",
"f3": 0.65,
"tagid": "8706",
"tagname": "网络购物"
},
{
"SECURITY_CODE": "000661",
"DERIVE_SECURITY_CODE": "000661.SZ",
"SECURITY_NAME": "长春高新",
"AMOUNT": "1052.00",
"SHARES_NUM": "6.84万",
"CHANGE_AVG_PRICE": "153.80",
"f14": "长春高新",
"f2": "152.72",
"f3": -0.07,
"tagid": "2596",
"tagname": "医药"
},
{
"SECURITY_CODE": "600884",
"DERIVE_SECURITY_CODE": "600884.SH",
"SECURITY_NAME": "杉杉股份",
"AMOUNT": "1025.32",
"SHARES_NUM": "76.00万",
"CHANGE_AVG_PRICE": "13.49",
"f14": "杉杉股份",
"f2": "13.71",
"f3": -1.22,
"tagid": "20073",
"tagname": "硅基阳极电池"
},
{
"SECURITY_CODE": "301029",
"DERIVE_SECURITY_CODE": "301029.SZ",
"SECURITY_NAME": "怡合达",
"AMOUNT": "999.66",
"SHARES_NUM": "33.96万",
"CHANGE_AVG_PRICE": "29.44",
"f14": "怡合达",
"f2": "26.83",
"f3": 0.52,
"tagid": "17685",
"tagname": "金属构配件"
},
{
"SECURITY_CODE": "301308",
"DERIVE_SECURITY_CODE": "301308.SZ",
"SECURITY_NAME": "江波龙",
"AMOUNT": "777.22",
"SHARES_NUM": "8.11万",
"CHANGE_AVG_PRICE": "95.83",
"f14": "江波龙",
"f2": "91.76",
"f3": 1.73,
"tagid": "21607",
"tagname": "边缘算力"
},
{
"SECURITY_CODE": "603678",
"DERIVE_SECURITY_CODE": "603678.SH",
"SECURITY_NAME": "火炬电子",
"AMOUNT": "769.41",
"SHARES_NUM": "27.62万",
"CHANGE_AVG_PRICE": "27.86",
"f14": "火炬电子",
"f2": "26.64",
"f3": 0.04,
"tagid": "1103",
"tagname": "航空航天"
},
{
"SECURITY_CODE": "605366",
"DERIVE_SECURITY_CODE": "605366.SH",
"SECURITY_NAME": "宏柏新材",
"AMOUNT": "716.31",
"SHARES_NUM": "85.59万",
"CHANGE_AVG_PRICE": "8.37",
"f14": "宏柏新材",
"f2": "8.24",
"f3": 1.6,
"tagid": "1182",
"tagname": "有机硅"
},
{
"SECURITY_CODE": "301071",
"DERIVE_SECURITY_CODE": "301071.SZ",
"SECURITY_NAME": "力量钻石",
"AMOUNT": "698.74",
"SHARES_NUM": "20.12万",
"CHANGE_AVG_PRICE": "34.73",
"f14": "力量钻石",
"f2": "34.12",
"f3": 2.83,
"tagid": "9384",
"tagname": "刀具"
},
{
"SECURITY_CODE": "603690",
"DERIVE_SECURITY_CODE": "603690.SH",
"SECURITY_NAME": "至纯科技",
"AMOUNT": "672.00",
"SHARES_NUM": "24.00万",
"CHANGE_AVG_PRICE": "28.00",
"f14": "至纯科技",
"f2": "25.96",
"f3": 0.08,
"tagid": "1192",
"tagname": "集成电路概念"
},
{
"SECURITY_CODE": "688443",
"DERIVE_SECURITY_CODE": "688443.SH",
"SECURITY_NAME": "智翔金泰",
"AMOUNT": "554.80",
"SHARES_NUM": "15.56万",
"CHANGE_AVG_PRICE": "35.66",
"f14": "智翔金泰-U",
"f2": "37.49",
"f3": 1.68,
"tagid": "661",
"tagname": "单抗概念"
},
{
"SECURITY_CODE": "603296",
"DERIVE_SECURITY_CODE": "603296.SH",
"SECURITY_NAME": "华勤技术",
"AMOUNT": "533.28",
"SHARES_NUM": "6.50万",
"CHANGE_AVG_PRICE": "82.04",
"f14": "华勤技术",
"f2": "75.06",
"f3": -1.34,
"tagid": "17086",
"tagname": "小米手机"
},
{
"SECURITY_CODE": "003016",
"DERIVE_SECURITY_CODE": "003016.SZ",
"SECURITY_NAME": "欣贺股份",
"AMOUNT": "521.66",
"SHARES_NUM": "60.00万",
"CHANGE_AVG_PRICE": "8.69",
"f14": "欣贺股份",
"f2": "8.61",
"f3": 0.35,
"tagid": "28914",
"tagname": "AI+服装"
},
{
"SECURITY_CODE": "688793",
"DERIVE_SECURITY_CODE": "688793.SH",
"SECURITY_NAME": "倍轻松",
"AMOUNT": "496.72",
"SHARES_NUM": "13.13万",
"CHANGE_AVG_PRICE": "37.83",
"f14": "倍轻松",
"f2": "35.80",
"f3": 1.27,
"tagid": "35915"
}
]
}, 500)
1.0.0（2023-12-06）
发布插件