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

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

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

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

@ -698,7 +698,7 @@ export default {
<template>
<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>
<script>
@ -709,6 +709,13 @@ export default {
const selectedKeys5 = ref(["1"]);
const getCheckboxProps = (data,index) => {
if(index == 2) {
return {disabled: true}
}
return {};
}
const changeSelectedKeys = () => {
selectedKeys5.value = ["2"]
}
@ -752,7 +759,8 @@ export default {
columns23,
dataSource23,
selectedKeys5,
changeSelectedKeys
changeSelectedKeys,
getCheckboxProps
}
}
}