refactor: 完全移除内置 vxe-table 支持

This commit is contained in:
xiaoxian521
2022-12-05 13:41:58 +08:00
parent 95940312a9
commit 3629a66535
17 changed files with 4334 additions and 2740 deletions

View File

@@ -1,7 +1,6 @@
<script setup lang="ts">
import { ref } from "vue";
import Print from "@/utils/print";
import { reactive, ref } from "vue";
import { VxeTablePropTypes } from "vxe-table";
import Line from "../welcome/components/Line.vue";
defineOptions({
@@ -14,43 +13,6 @@ interface User {
address: string;
}
const demo1 = reactive({
tableData: [
{
id: 10001,
name: "Test1",
role: "Develop",
sex: "Man",
age: 28,
address: "test abc"
},
{
id: 10002,
name: "Test2",
role: "Test",
sex: "Women",
age: 22,
address: "Guangzhou"
},
{
id: 10003,
name: "Test3",
role: "PM",
sex: "Man",
age: 32,
address: "Shanghai"
},
{
id: 10004,
name: "Test4",
role: "Designer",
sex: "Women",
age: 24,
address: "Shanghai"
}
]
});
const value = ref("1");
const options = [
@@ -59,11 +21,6 @@ const options = [
el: ".el-table",
label: "Element-Plus Table"
},
{
value: "2",
el: ".vxe-table",
label: "Vxe Table"
},
{
value: "3",
el: ".echart",
@@ -81,38 +38,6 @@ function onPrint() {
Print(el).toPrint;
}
const headerCellStyle: VxeTablePropTypes.HeaderCellStyle = ({ column }) => {
if (column.property === "name") {
return {
backgroundColor: "#f60",
color: "#ffffff"
};
}
};
const rowStyle: VxeTablePropTypes.RowStyle = ({ rowIndex }) => {
if ([2, 3, 5].includes(rowIndex)) {
return {
backgroundColor: "red",
color: "#ffffff"
};
}
};
const cellStyle: VxeTablePropTypes.CellStyle = ({ row, column }) => {
if (column.property === "sex") {
if (row.sex >= "1") {
return {
backgroundColor: "#187"
};
} else if (row.age === 26) {
return {
backgroundColor: "#2db7f5"
};
}
}
};
const tableRowClassName = ({ rowIndex }: { row: User; rowIndex: number }) => {
if (rowIndex === 1) {
return "warning-row";
@@ -205,45 +130,6 @@ const tableData: User[] = [
</el-table>
</el-col>
<el-col
:xs="22"
:sm="22"
:md="11"
:lg="11"
:xl="11"
style="margin: 10px; border: 0.01rem solid var(--el-color-primary)"
v-motion
:initial="{
opacity: 0,
y: 100
}"
:enter="{
opacity: 1,
y: 0,
transition: {
delay: 200
}
}"
>
<p class="font-medium pt-1">Vxe Table</p>
<vxe-table
class="vxe-table"
border
style="margin: 40px auto"
:header-cell-style="headerCellStyle"
:row-style="rowStyle"
:cell-style="cellStyle"
:data="demo1.tableData"
>
<vxe-column type="seq" width="60" />
<vxe-column field="name" title="Name" />
<vxe-column field="sex" title="Sex" />
<vxe-column field="age" title="Age" />
<vxe-column field="attr1" title="Attr1" />
<vxe-column field="address" title="Address" show-overflow />
</vxe-table>
</el-col>
<el-col
:xs="22"
:sm="22"