📝(component): 更新日志

This commit is contained in:
就眠儀式 2022-06-29 10:09:21 +08:00
parent fb16960f28
commit 36323688bb
5 changed files with 121 additions and 33 deletions

View File

@ -41,7 +41,7 @@ const props = withDefaults(defineProps<LayTableRowProps>(), {
checkbox: false, checkbox: false,
childrenColumnName: "children", childrenColumnName: "children",
cellStyle: "", cellStyle: "",
cellClassName: "" cellClassName: "",
}); });
const tableSelectedKeys: WritableComputedRef<Recordable[]> = computed({ const tableSelectedKeys: WritableComputedRef<Recordable[]> = computed({
@ -82,33 +82,43 @@ const handleExpand = () => {
isExpand.value = !isExpand.value; isExpand.value = !isExpand.value;
}; };
const renderCellStyle = (row: any, column: any, rowIndex: number, columnIndex: number) => { const renderCellStyle = (
if(typeof props.cellStyle === 'string') { row: any,
column: any,
rowIndex: number,
columnIndex: number
) => {
if (typeof props.cellStyle === "string") {
return props.cellStyle; return props.cellStyle;
} }
return props.cellStyle(row, column, rowIndex, columnIndex); return props.cellStyle(row, column, rowIndex, columnIndex);
} };
const renderCellClassName = (row: any, column: any, rowIndex: number, columnIndex: number) => { const renderCellClassName = (
if(typeof props.cellClassName === 'string') { row: any,
column: any,
rowIndex: number,
columnIndex: number
) => {
if (typeof props.cellClassName === "string") {
return props.cellClassName; return props.cellClassName;
} }
return props.cellClassName(row, column, rowIndex, columnIndex); return props.cellClassName(row, column, rowIndex, columnIndex);
} };
const renderRowStyle = (data: any, index: number) => { const renderRowStyle = (data: any, index: number) => {
if(typeof props.rowStyle === 'string') { if (typeof props.rowStyle === "string") {
return props.rowStyle; return props.rowStyle;
} }
return props.rowStyle(data, index); return props.rowStyle(data, index);
} };
const renderRowClassName = (data: any, index: number) => { const renderRowClassName = (data: any, index: number) => {
if(typeof props.rowClassName === 'string') { if (typeof props.rowClassName === "string") {
return props.rowClassName; return props.rowClassName;
} }
return props.rowClassName(data, index); return props.rowClassName(data, index);
} };
const childrenIndentSize = props.currentIndentSize + props.indentSize; const childrenIndentSize = props.currentIndentSize + props.indentSize;
</script> </script>
@ -140,10 +150,13 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
<template v-if="column.customSlot"> <template v-if="column.customSlot">
<td <td
class="layui-table-cell" class="layui-table-cell"
:style="[{ :style="[
{
textAlign: column.align, textAlign: column.align,
whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal', whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
}, renderCellStyle(data, column, index, columnIndex)]" },
renderCellStyle(data, column, index, columnIndex),
]"
:class="[renderCellClassName(data, column, index, columnIndex)]" :class="[renderCellClassName(data, column, index, columnIndex)]"
> >
<!-- 树表占位与缩进 --> <!-- 树表占位与缩进 -->
@ -163,7 +176,9 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
></span> ></span>
<lay-icon <lay-icon
v-if="(slot.expand || data[childrenColumnName]) && columnIndex === 0" v-if="
(slot.expand || data[childrenColumnName]) && columnIndex === 0
"
class="layui-table-cell-expand-icon" class="layui-table-cell-expand-icon"
:type="expandIconType" :type="expandIconType"
@click="handleExpand" @click="handleExpand"
@ -185,10 +200,13 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
<template v-if="column.key in data"> <template v-if="column.key in data">
<td <td
class="layui-table-cell" class="layui-table-cell"
:style="[{ :style="[
{
textAlign: column.align, textAlign: column.align,
whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal', whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
}, renderCellStyle(data, column, index, columnIndex)]" },
renderCellStyle(data, column, index, columnIndex),
]"
:class="[renderCellClassName(data, column, index, columnIndex)]" :class="[renderCellClassName(data, column, index, columnIndex)]"
> >
<!-- 树表占位与缩进 --> <!-- 树表占位与缩进 -->
@ -208,7 +226,9 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
></span> ></span>
<lay-icon <lay-icon
v-if="(slot.expand || data[childrenColumnName]) && columnIndex === 0" v-if="
(slot.expand || data[childrenColumnName]) && columnIndex === 0
"
class="layui-table-cell-expand-icon" class="layui-table-cell-expand-icon"
:type="expandIconType" :type="expandIconType"
@click="handleExpand" @click="handleExpand"

View File

@ -13,7 +13,7 @@ import {
enable as enableDarkMode, enable as enableDarkMode,
disable as disableDarkMode, disable as disableDarkMode,
auto as followSystemColorScheme, auto as followSystemColorScheme,
setFetchMethod setFetchMethod,
} from "@umijs/ssr-darkreader"; } from "@umijs/ssr-darkreader";
export interface LayConfigProviderProps { export interface LayConfigProviderProps {
@ -72,7 +72,7 @@ const changeTheme = (theme: string) => {
}; };
Object.assign(defaultPartial, props.darkPartial); Object.assign(defaultPartial, props.darkPartial);
if (theme === "dark") { if (theme === "dark") {
if(window){ if (window) {
setFetchMethod(window.fetch); setFetchMethod(window.fetch);
} }
enableDarkMode(defaultPartial, defaultFixes); enableDarkMode(defaultPartial, defaultFixes);

View File

@ -598,6 +598,60 @@ export default {
::: :::
::: title 固定边列
:::
::: demo 通过 `even` 属性, 开启斑马条纹, 默认为 false。
<template>
<lay-table :columns="columns1" :dataSource="dataSource1" even></lay-table>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const columns1 = [
{
title:"账户",
width:"200px",
key:"username"
},{
title:"密码",
width: "180px",
key:"password"
},{
title:"年龄",
width: "180px",
key:"age"
},{
title:"备注",
width: "180px",
key:"remark",
ellipsisTooltip: true,
}
]
const dataSource1 = [
{username:"root", password:"root", age:"18", remark: 'layui - vue谐音类 UI) '},
{username:"root", password:"root", age:"18", remark: 'layui - vue谐音类 UI) '},
{username:"woow", password:"woow", age:"20", remark: 'layui - vue谐音类 UI) '},
{username:"woow", password:"woow", age:"20", remark: 'layui - vue谐音类 UI) '},
{username:"woow", password:"woow", age:"20", remark: 'layui - vue谐音类 UI) '}
]
return {
columns1,
dataSource1
}
}
}
</script>
:::
::: title Table 属性 ::: title Table 属性
::: :::

View File

@ -11,6 +11,20 @@
<template> <template>
<lay-timeline> <lay-timeline>
<lay-timeline-item title="1.2.x"> <lay-timeline-item title="1.2.x">
<ul>
<a name="1-2-5"></a>
<li>
<h3>1.2.5 <span class="layui-badge-rim">2022-06-28</span></h3>
<ul>
<li>[新增] table 组件 rowStyle 属性, 自定义行样式, 值为 function(row, rowIndex) 函数或 string 类型。</li>
<li>[新增] table 组件 rowClassName 属性, 自定义行样式, 值为 function(row, rowIndex) 函数或 string 类型。</li>
<li>[新增] table 组件 cellStyle 属性, 自定义单元格样式, 值为 function(row, column, rowIndex, columnIndex) 函数或 string 类型。</li>
<li>[新增] table 组件 cellClassName 属性, 自定义单元格样式, 值为 function(row, column, rowIndex, columnIndex) 函数或 string 类型。</li>
<li>[修复] icon-picker 组件在颜色面板中拉动选取颜色,触碰颜色面板边角时,导致色相变为 0。 </li>
<li>[修复] provider 组件切换主题 Embedded Dark Reader cannot access a cross-origin resource。</li>
</ul>
</li>
</ul>
<ul> <ul>
<a name="1-2-4"></a> <a name="1-2-4"></a>
<li> <li>