✨(table): 新增 type 属性 radio 值 与 selectedKey 属性, 用于支持单选
This commit is contained in:
就眠儀式
parent
49e2d25d6d
commit
e0c2664bdf
@ -19,6 +19,7 @@ export interface LayTableRowProps {
|
||||
expandSpace: boolean;
|
||||
expandIndex: number;
|
||||
selectedKeys: Recordable[];
|
||||
selectedKey: any;
|
||||
tableColumnKeys: Recordable[];
|
||||
childrenColumnName?: string;
|
||||
columns: Recordable[];
|
||||
@ -37,6 +38,7 @@ const emit = defineEmits([
|
||||
"row-double",
|
||||
"contextmenu",
|
||||
"update:selectedKeys",
|
||||
"update:selectedKey",
|
||||
]);
|
||||
|
||||
const props = withDefaults(defineProps<LayTableRowProps>(), {
|
||||
@ -55,6 +57,15 @@ const tableSelectedKeys: WritableComputedRef<Recordable[]> = computed({
|
||||
},
|
||||
});
|
||||
|
||||
const tableSelectedKey: WritableComputedRef<Recordable[]> = computed({
|
||||
get() {
|
||||
return props.selectedKey;
|
||||
},
|
||||
set(val) {
|
||||
emit("update:selectedKey", val);
|
||||
},
|
||||
});
|
||||
|
||||
const isExpand = ref(false);
|
||||
const slotsData = ref<string[]>([]);
|
||||
|
||||
@ -182,6 +193,57 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
|
||||
<template v-for="(column, columnIndex) in columns" :key="columnIndex">
|
||||
<!-- 展示否 -->
|
||||
<template v-if="tableColumnKeys.includes(column.key)">
|
||||
|
||||
<template v-if="column.type == 'radio'">
|
||||
<td
|
||||
class="layui-table-cell"
|
||||
:style="[
|
||||
{
|
||||
textAlign: column.align,
|
||||
whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
|
||||
},
|
||||
renderFixedStyle(column, columnIndex),
|
||||
renderCellStyle(data, column, index, columnIndex),
|
||||
]"
|
||||
:class="[
|
||||
renderFixedClassName(column, columnIndex),
|
||||
renderCellClassName(data, column, index, columnIndex),
|
||||
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
|
||||
]"
|
||||
>
|
||||
<!-- 树表占位与缩进 -->
|
||||
<span
|
||||
v-if="expandSpace && columnIndex === expandIndex"
|
||||
:style="{ 'margin-right': currentIndentSize + 'px' }"
|
||||
></span>
|
||||
|
||||
<span
|
||||
v-if="
|
||||
expandSpace &&
|
||||
!data[childrenColumnName] &&
|
||||
!slot.expand &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon-spaced"
|
||||
></span>
|
||||
|
||||
<lay-icon
|
||||
v-if="
|
||||
(slot.expand || data[childrenColumnName]) &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon"
|
||||
:type="expandIconType"
|
||||
@click="handleExpand"
|
||||
></lay-icon>
|
||||
|
||||
<lay-radio
|
||||
v-model="tableSelectedKey"
|
||||
:value="data[id]"
|
||||
/>
|
||||
</td>
|
||||
</template>
|
||||
|
||||
<template v-if="column.type == 'checkbox'">
|
||||
<td
|
||||
class="layui-table-cell"
|
||||
|
||||
@ -14,6 +14,8 @@ import {
|
||||
onMounted,
|
||||
onUpdated,
|
||||
StyleValue,
|
||||
WritableComputedRef,
|
||||
computed,
|
||||
} from "vue";
|
||||
import { v4 as uuidv4 } from "../../utils/guidUtil";
|
||||
import { Recordable } from "../../types";
|
||||
@ -31,13 +33,14 @@ export interface LayTableProps {
|
||||
columns: Recordable[];
|
||||
dataSource: Recordable[];
|
||||
defaultToolbar?: boolean;
|
||||
selectedKey?: any;
|
||||
selectedKeys?: Recordable[];
|
||||
indentSize?: number;
|
||||
childrenColumnName?: string;
|
||||
height?: number;
|
||||
maxHeight?: string;
|
||||
even?: boolean;
|
||||
expandIndex: number;
|
||||
expandIndex?: number;
|
||||
rowClassName?: string | Function;
|
||||
cellClassName?: string | Function;
|
||||
rowStyle?: string | Function;
|
||||
@ -67,6 +70,7 @@ const emit = defineEmits([
|
||||
"change",
|
||||
"row-double",
|
||||
"update:selectedKeys",
|
||||
"update:selectedKey",
|
||||
"contextmenu",
|
||||
]);
|
||||
|
||||
@ -86,6 +90,15 @@ const tableColumnKeys = ref(
|
||||
})
|
||||
);
|
||||
|
||||
const tableSelectedKey: WritableComputedRef<Recordable[]> = computed({
|
||||
get() {
|
||||
return props.selectedKey;
|
||||
},
|
||||
set(val) {
|
||||
emit("update:selectedKey", val);
|
||||
},
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.dataSource,
|
||||
() => {
|
||||
@ -484,6 +497,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
|
||||
@row-double="rowDoubleClick"
|
||||
@contextmenu="contextmenu"
|
||||
v-model:selectedKeys="tableSelectedKeys"
|
||||
v-model:selectedKey="tableSelectedKey"
|
||||
>
|
||||
<template v-for="name in slotsData" #[name]="{ data }">
|
||||
<slot :name="name" :data="data"></slot>
|
||||
|
||||
@ -616,7 +616,7 @@ export default {
|
||||
::: title 开启序号
|
||||
:::
|
||||
|
||||
::: demo 通过 `fixed` 属性实现列固定, 可选值为 `left` 与 `right`。
|
||||
::: demo 通过 `columns` 配置 `type:'number'` 开启序号列。
|
||||
|
||||
<template>
|
||||
<lay-table :columns="columns21" :dataSource="dataSource21"></lay-table>
|
||||
@ -680,7 +680,7 @@ export default {
|
||||
::: title 开启多选
|
||||
:::
|
||||
|
||||
::: demo 通过 `fixed` 属性实现列固定, 可选值为 `left` 与 `right`。
|
||||
::: demo 通过 `columns` 配置 `type:'checkbox'` 开启单选列。
|
||||
|
||||
<template>
|
||||
<lay-table :columns="columns23" :dataSource="dataSource23"></lay-table>
|
||||
@ -746,6 +746,73 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 开启单选
|
||||
:::
|
||||
|
||||
::: demo 通过 `columns` 配置 `type:'radio'` 开启单选列。
|
||||
|
||||
<template>
|
||||
<lay-table :columns="columns24" :dataSource="dataSource24" v-model:selectedKey="selectedKey24"></lay-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const columns24 = [
|
||||
{
|
||||
title: "ID",
|
||||
width: "30px",
|
||||
type: "radio",
|
||||
align: "center"
|
||||
},
|
||||
{
|
||||
title:"账户",
|
||||
width:"200px",
|
||||
key:"username"
|
||||
},{
|
||||
title:"密码",
|
||||
width: "300px",
|
||||
key:"password"
|
||||
},{
|
||||
title:"性别",
|
||||
width: "300px",
|
||||
key:"sex"
|
||||
},{
|
||||
title:"年龄",
|
||||
width: "300px",
|
||||
key:"age"
|
||||
},{
|
||||
title:"备注",
|
||||
width: "180px",
|
||||
key:"remark",
|
||||
ellipsisTooltip: true
|
||||
}
|
||||
]
|
||||
|
||||
const selectedKey24 = ref("2");
|
||||
|
||||
const dataSource24 = [
|
||||
{id:"1",username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
|
||||
{id:"2",username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
|
||||
{id:"3",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
|
||||
{id:"4",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
|
||||
{id:"5",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '}
|
||||
]
|
||||
|
||||
return {
|
||||
columns24,
|
||||
dataSource24,
|
||||
selectedKey24,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 刷新数据
|
||||
:::
|
||||
|
||||
@ -796,7 +863,7 @@ export default {
|
||||
])
|
||||
|
||||
const changeDataSource22 = () => {
|
||||
dataSource21.value = [{username:"update", password:"update",sex:"boy", age:"18", remark: '更新数据 '}]
|
||||
dataSource22.value = [{username:"update", password:"update",sex:"boy", age:"18", remark: '更新数据 '}]
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
>
|
||||
<span
|
||||
>{{ t("home.download") }}：<em class="site-showdowns"
|
||||
>14,684</em
|
||||
>16,297</em
|
||||
></span
|
||||
>
|
||||
</div>
|
||||
@ -43,7 +43,7 @@
|
||||
rel="nofollow"
|
||||
class="site-star"
|
||||
>
|
||||
<i class="layui-icon"></i> Star <cite id="getStars">1296</cite>
|
||||
<i class="layui-icon"></i> Star <cite id="getStars">1326</cite>
|
||||
</a>
|
||||
<a
|
||||
href="https://gitee.com/layui-vue"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user