初始提交
This commit is contained in:
216
src/components/aboutTable/MyTable.vue
Normal file
216
src/components/aboutTable/MyTable.vue
Normal file
@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div style="width: 100%">
|
||||
<!-- hasChildren要在tableData中定义表示当前行有没有下一级 children要在tableData中定义表示下一级的数据-->
|
||||
<el-table
|
||||
ref="multipleTableRef"
|
||||
:data="tableData"
|
||||
@selection-change="handleSelectionChange"
|
||||
@current-change="handleCurrentChange"
|
||||
@row-click="singleElection"
|
||||
:row-key="getConfiger.rowKey"
|
||||
:border="getConfiger.border"
|
||||
:default-expand-all="getConfiger.defaultExpandAll"
|
||||
:stripe="getConfiger.stripe"
|
||||
:height="tableHeight"
|
||||
v-loading="tableConfiger.loading"
|
||||
:lazy="getConfiger.lazy"
|
||||
:load="load"
|
||||
:tree-props="treePros"
|
||||
style="width: 100%"
|
||||
:header-cell-class-name="() => '街面警情统计HeadBgColor'"
|
||||
:highlight-current-row="getConfiger.showSelectType === 'radio'"
|
||||
:row-style="{ height: getConfiger.rowHeight === 'auto' ? getConfiger.rowHeight : getConfiger.rowHeight + 'px'}"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55"
|
||||
v-if="getConfiger.showSelectType === 'checkBox'"
|
||||
/>
|
||||
<el-table-column
|
||||
width="55"
|
||||
v-else-if="getConfiger.showSelectType === 'radio'"
|
||||
#default="{ row }"
|
||||
>
|
||||
<el-radio
|
||||
class="radio"
|
||||
v-model="getConfiger.radioChoose"
|
||||
:label="row[getConfiger.rowKey]"
|
||||
> </el-radio
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
type="index"
|
||||
label="序号"
|
||||
v-if="getConfiger.showIndex"
|
||||
width="60"
|
||||
:align="getConfiger?.align"
|
||||
/>
|
||||
|
||||
<el-table-column
|
||||
v-for="(item, index) in tableColumn"
|
||||
:align="getConfiger?.align"
|
||||
:prop="item.prop"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:width="item.width"
|
||||
style="width: 100%; font-size: 14px"
|
||||
:show-overflow-tooltip="item.showOverflowTooltip || false"
|
||||
:sortable="item.sortable || false"
|
||||
>
|
||||
<!-- 使用自定义 -->
|
||||
<template v-if="item.showSolt" #default="scope">
|
||||
<slot :name="item.prop" v-bind="scope"></slot>
|
||||
</template>
|
||||
<!-- 默认 -->
|
||||
<template v-else #default="{ row }">
|
||||
{{ row[item.prop] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 操作 -->
|
||||
<el-table-column
|
||||
v-if="getConfiger.haveControls"
|
||||
:fixed="fixed"
|
||||
:label="getConfiger.controls"
|
||||
:width="controlsWidth"
|
||||
:align="getConfiger?.align"
|
||||
>
|
||||
<template #default="scope">
|
||||
<slot name="controls" v-bind="scope"></slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { nextTick, onMounted, reactive, ref, watch, watchEffect } from "vue";
|
||||
const props = defineProps({
|
||||
tableConfiger: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
tableColumn: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
controlsWidth: {
|
||||
type: Number,
|
||||
default: 180
|
||||
},
|
||||
tableHeight: {
|
||||
type: Number
|
||||
},
|
||||
treePros: {
|
||||
type: Object,
|
||||
default: {
|
||||
children: "children",
|
||||
hasChildren: "hasChildren"
|
||||
}
|
||||
},
|
||||
fixed: {
|
||||
type: String,
|
||||
default: "right"
|
||||
}
|
||||
});
|
||||
// 可选的时候选择的数据
|
||||
const emit = defineEmits(["chooseData"]);
|
||||
const multipleTableRef = ref();
|
||||
const currentRow = ref();
|
||||
let getConfiger = reactive({
|
||||
showSelectType: null, // 显示多选还是单选还是没有选择 checkBox/radio/null
|
||||
showIndex: true, // 是否显示索引
|
||||
rowKey: null, // 如果是树形表格必须设置rowKey
|
||||
border: true, // 是否显示边框
|
||||
defaultExpandAll: false, // 是否展开全部
|
||||
loading: false,
|
||||
align: "center", // 列的对齐方式 left / center / right
|
||||
haveControls: true, // 是否有操作列
|
||||
controls: "操作", // 操作列的表头
|
||||
stripe: false, // 是否有斑马线
|
||||
lazy: true, // 树形表格的懒加载必须在tableDatez中给有children的项设置 hasChildren: true,才会显示展开icon
|
||||
portUrl: "", // 当树形表格使用懒加载的时候传入的请求路径/接口用于懒加载数据
|
||||
defaultSelectKeys: [], // 默认选中的key集合
|
||||
radioChoose: "", // 单选时选中的值------------- 待完成
|
||||
rowHeight: "41" // 每行的高度
|
||||
});
|
||||
watchEffect(() => {
|
||||
getConfiger = { ...getConfiger, ...props.tableConfiger };
|
||||
setDefaultChoose();
|
||||
});
|
||||
onMounted(() => {
|
||||
setDefaultChoose();
|
||||
});
|
||||
// 可选的时候选择的数据
|
||||
const handleSelectionChange = (val) => {
|
||||
emit("chooseData", val);
|
||||
};
|
||||
// 单选的时候选择的数据
|
||||
const handleCurrentChange = (val) => {
|
||||
currentRow.value = val;
|
||||
emit("chooseData", val);
|
||||
};
|
||||
const singleElection = (val) => {
|
||||
if (getConfiger.showSelectType === "radio") {
|
||||
getConfiger.radioChoose = val[getConfiger.rowKey];
|
||||
emit("chooseData", val);
|
||||
}
|
||||
};
|
||||
// 懒加载数据的方法
|
||||
const load = (date, treeNode, resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve([
|
||||
{
|
||||
id: 31,
|
||||
date: "2016-05-01",
|
||||
name: "wangxiaohu",
|
||||
address: "No. 189, Grove St, Los Angeles"
|
||||
},
|
||||
{
|
||||
id: 32,
|
||||
date: "2016-05-01",
|
||||
name: "wangxiaohu",
|
||||
address: "No. 189, Grove St, Los Angeles"
|
||||
}
|
||||
]);
|
||||
}, 1000);
|
||||
};
|
||||
// 设置默认选中（在调用的父页面要确保 tableData传出来了如果延迟传过来默认选中不会生效）
|
||||
function setDefaultChoose() {
|
||||
nextTick(() => {
|
||||
// 多选的默认选中
|
||||
if (
|
||||
props.tableConfiger.defaultSelectKeys?.length > 0 &&
|
||||
props.tableConfiger.showSelectType === "checkBox"
|
||||
) {
|
||||
props.tableData.forEach((item) => {
|
||||
if (
|
||||
props.tableConfiger.defaultSelectKeys.findIndex(
|
||||
(v) => v === item[props.tableConfiger.rowKey]
|
||||
) > -1
|
||||
) {
|
||||
multipleTableRef.value.toggleRowSelection(item, true);
|
||||
}
|
||||
});
|
||||
// 单选的默认选中
|
||||
} else if (
|
||||
props.tableConfiger.defaultSelectKeys &&
|
||||
props.tableConfiger.defaultSelectKeys?.length > 0 &&
|
||||
props.tableConfiger.showSelectType === "radio"
|
||||
) {
|
||||
getConfiger.radioChoose = props.tableConfiger.defaultSelectKeys[0];
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang = "scss">
|
||||
.el-loading-mask{
|
||||
background: rgba(0,0,0,0.3);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user