This commit is contained in:
GGJ
2023-12-28 14:23:32 +08:00
6 changed files with 528 additions and 32 deletions

View File

@@ -40,9 +40,10 @@
</div>
<!-- customTemplate 自定义模板 -->
<div v-if="field.render == 'customTemplate'">
{{ field.customTemplate ? field.customTemplate(row, field, fieldValue, column, index) : '' }}
</div>
<div
v-if="field.render == 'customTemplate'"
v-html="field.customTemplate ? field.customTemplate(row, field, fieldValue, column, index) : ''"
></div>
<!-- 自定义组件/函数渲染 -->
<component
@@ -145,7 +146,8 @@ import { ref, inject } from 'vue'
import type { TagProps } from 'element-plus'
import type TableStoreClass from '@/utils/tableStore'
import { fullUrl, timeFormat } from '@/utils/common'
import { VxeColumnProps } from 'vxe-table/types/all'
import type { VxeColumnProps } from 'vxe-table'
const TableStore = inject('tableStore') as TableStoreClass
interface Props {

View File

@@ -18,9 +18,9 @@
<Table ref="tableRef" />
</div>
</template>
<script setup lang="ts">
<script setup lang="tsx">
import { Plus } from '@element-plus/icons-vue'
import { ref, onMounted, provide, h } from 'vue'
import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
@@ -51,30 +51,29 @@ const tableStore = new TableStore({
field: 'onlineEvaluate',
align: 'center',
width: 100,
render: 'customTemplate',
customTemplate: row => {
return h(
'el-tag',
{
effect: 'dark',
type:
row.onlineEvaluate * 100 > 90
? 'success'
: row.onlineEvaluate * 100 > 60
? 'warning'
: 'danger'
},
row.onlineEvaluate * 100 + '%'
)
// if (row.onlineEvaluate == null) {
// return '-'
// } else if (row.onlineEvaluate * 100 > 90) {
// return `<el-tag effect="dark" type="success"> 优 </el-tag> `
// } else if (row.onlineEvaluate * 100 > 60) {
// return `<el-tag effect="dark" type="warning"> 良 </el-tag> `
// } else {
// return `<el-tag effect="dark" type="danger"> 差 </el-tag> `
// }
render: 'customRender',
customRender: props => {
if (props.renderValue == null) {
return <span></span>
} else if (props.renderValue * 100 > 90) {
return (
<el-tag effect="dark" type="success">
</el-tag>
)
} else if (props.renderValue * 100 > 60) {
return (
<el-tag effect="dark" type="warning">
</el-tag>
)
} else {
return (
<el-tag effect="dark" type="danger">
</el-tag>
)
}
}
}
]