theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨(component): 新增 table 组件 getCheckboxProps 与 getRadioProps 方法

Browse Source
This commit is contained in:
就眠儀式 2022-08-10 14:56:48 +08:00
parent 164d07fa93
commit 9ddf369176
3 changed files with 50 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
package/component/src/component/table/TableRow.vue
View File

@ -34,6 +34,8 @@ export interface LayTableRowProps {
spanMethod: Function; spanMethod: Function;
defaultExpandAll: boolean; defaultExpandAll: boolean;
expandKeys: Recordable[]; expandKeys: Recordable[];
getCheckboxProps: Function;
getRadioProps: Function;
} }
const slot = useSlots(); const slot = useSlots();
@ -272,6 +274,9 @@ const isAutoShow = (
return true; return true;
} }
}; };
const checkboxProps = props.getCheckboxProps(props.data, props.index);
const radioProps = props.getRadioProps(props.data, props.index);
</script> </script>
<template> <template>
@ -334,7 +339,11 @@ const isAutoShow = (
@click="handleExpand" @click="handleExpand"
></lay-icon> ></lay-icon>
<lay-radio v-model="tableSelectedKey" :value="data[id]" /> <lay-radio
v-model="tableSelectedKey"
v-bind="radioProps"
:value="data[id]"
/>
</td> </td>
</template> </template>
@ -389,6 +398,7 @@ const isAutoShow = (
<lay-checkbox <lay-checkbox
v-model="tableSelectedKeys" v-model="tableSelectedKeys"
v-bind="checkboxProps"
:value="data[id]" :value="data[id]"
skin="primary" skin="primary"
/> />
@ -602,6 +612,8 @@ const isAutoShow = (
:rowClassName="rowClassName" :rowClassName="rowClassName"
:spanMethod="spanMethod" :spanMethod="spanMethod"
:defaultExpandAll="defaultExpandAll" :defaultExpandAll="defaultExpandAll"
:getCheckboxProps="getCheckboxProps"
:getRadioProps="getRadioProps"
@row="rowClick" @row="rowClick"
@row-double="rowDoubleClick" @row-double="rowDoubleClick"
@row-contextmenu="rowContextmenu" @row-contextmenu="rowContextmenu"

44
package/component/src/component/table/index.vue
View File

@ -50,6 +50,8 @@ export interface LayTableProps {
defaultExpandAll?: boolean; defaultExpandAll?: boolean;
expandKeys?: Recordable[]; expandKeys?: Recordable[];
loading?: boolean; loading?: boolean;
getCheckboxProps?: Function;
getRadioProps?: Function;
} }
const props = withDefaults(defineProps<LayTableProps>(), { const props = withDefaults(defineProps<LayTableProps>(), {
@ -71,6 +73,8 @@ const props = withDefaults(defineProps<LayTableProps>(), {
spanMethod: () => {}, spanMethod: () => {},
expandKeys: () => [], expandKeys: () => [],
loading: false, loading: false,
getCheckboxProps: () => {},
getRadioProps: () => {}
}); });
const tableId = uuidv4(); const tableId = uuidv4();
@ -326,37 +330,41 @@ const print = function () {
}; };
/** /**
* excel 导出 * excel 导出
*/ */
const exportData = () => { const exportData = () => {
var tableStr = ``; var tableStr = ``;
for(let tableHeadColumn of tableHeadColumns.value){ for (let tableHeadColumn of tableHeadColumns.value) {
tableStr += '<tr>'; tableStr += "<tr>";
for(let column of tableHeadColumn){ for (let column of tableHeadColumn) {
tableStr += `<td colspan=${column.colspan} rowspan=${column.rowspan}>${column.title}</td>` tableStr += `<td colspan=${column.colspan} rowspan=${column.rowspan}>${column.title}</td>`;
} }
tableStr += '</tr>'; tableStr += "</tr>";
} }
tableDataSource.value.forEach((item, rowIndex) => { tableDataSource.value.forEach((item, rowIndex) => {
tableStr += '<tr>' tableStr += "<tr>";
tableBodyColumns.value.forEach((tableColumn, columnIndex) => { tableBodyColumns.value.forEach((tableColumn, columnIndex) => {
Object.keys(item).forEach((name) => { Object.keys(item).forEach((name) => {
if (tableColumn.key === name) { if (tableColumn.key === name) {
const rowColSpan = props.spanMethod(item, tableColumn, rowIndex, columnIndex); const rowColSpan = props.spanMethod(
item,
tableColumn,
rowIndex,
columnIndex
);
const rowspan = rowColSpan ? rowColSpan[0] : 1; const rowspan = rowColSpan ? rowColSpan[0] : 1;
const colspan = rowColSpan ? rowColSpan[1] : 1; const colspan = rowColSpan ? rowColSpan[1] : 1;
if(rowspan != 0 && colspan != 0) { if (rowspan != 0 && colspan != 0) {
tableStr += `<td colspan=${colspan} rowspan=${rowspan}>${item[name]}</td>` tableStr += `<td colspan=${colspan} rowspan=${rowspan}>${item[name]}</td>`;
} }
} }
}); });
}); });
tableStr += '</tr>' tableStr += "</tr>";
}); });
var worksheet = "Sheet1"; var worksheet = "Sheet1";
var uri = "data:application/vnd.ms-excel;base64,"; var uri = "data:application/vnd.ms-excel;base64,";
var exportTemplate = var exportTemplate = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"
`<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40"> xmlns="http://www.w3.org/TR/REC-html40">
<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet> <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
<x:Name>${worksheet}</x:Name> <x:Name>${worksheet}</x:Name>
@ -469,7 +477,7 @@ const slotsData = ref<string[]>([]);
props.columns.map((value: any) => { props.columns.map((value: any) => {
if (value.customSlot) { if (value.customSlot) {
slotsData.value.push(value.customSlot); slotsData.value.push(value.customSlot);
} }
}); });
const currentIndentSize = ref(0); const currentIndentSize = ref(0);
@ -783,6 +791,8 @@ const renderTotalRowCell = (column: any) => {
:rowClassName="rowClassName" :rowClassName="rowClassName"
:spanMethod="spanMethod" :spanMethod="spanMethod"
:defaultExpandAll="defaultExpandAll" :defaultExpandAll="defaultExpandAll"
:getCheckboxProps="getCheckboxProps"
:getRadioProps="getRadioProps"
@row="rowClick" @row="rowClick"
@row-double="rowDoubleClick" @row-double="rowDoubleClick"
@row-contextmenu="rowContextmenu" @row-contextmenu="rowContextmenu"

12
package/document-component/src/document/zh-CN/components/table.md
View File

@ -698,7 +698,7 @@ export default {
<template> <template>
<lay-button @click="changeSelectedKeys">修改选中值 {{ selectedKeys5 }}</lay-button> <lay-button @click="changeSelectedKeys">修改选中值 {{ selectedKeys5 }}</lay-button>
<lay-table :columns="columns23" :data-source="dataSource23" v-model:selectedKeys="selectedKeys5"></lay-table> <lay-table :columns="columns23" :data-source="dataSource23" v-model:selectedKeys="selectedKeys5" :getCheckboxProps="getCheckboxProps"></lay-table>
</template> </template>
<script> <script>
@ -709,6 +709,13 @@ export default {
const selectedKeys5 = ref(["1"]); const selectedKeys5 = ref(["1"]);
const getCheckboxProps = (data,index) => {
if(index == 2) {
return {disabled: true}
}
return {};
}
const changeSelectedKeys = () => { const changeSelectedKeys = () => {
selectedKeys5.value = ["2"] selectedKeys5.value = ["2"]
} }
@ -752,7 +759,8 @@ export default {
columns23, columns23,
dataSource23, dataSource23,
selectedKeys5, selectedKeys5,
changeSelectedKeys changeSelectedKeys,
getCheckboxProps
} }
} }
} }