You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
1.8 KiB
Vue
101 lines
1.8 KiB
Vue
<template>
|
|
<div>
|
|
<el-alert
|
|
effect="dark"
|
|
:closable="false"
|
|
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 带状态表格"
|
|
type="info"
|
|
style="margin-bottom: 20px;"
|
|
/>
|
|
<com-table
|
|
v-loading="loading"
|
|
:columns="columns"
|
|
:data="tableData"
|
|
:row-class-name="tableRowClassName"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref } from 'vue'
|
|
import ComTable from '_c/Table/index.vue'
|
|
|
|
const columns = [
|
|
{
|
|
key: 'date',
|
|
label: '日期'
|
|
},
|
|
{
|
|
key: 'name',
|
|
label: '姓名'
|
|
},
|
|
{
|
|
key: 'address',
|
|
label: '地址'
|
|
}
|
|
]
|
|
|
|
const tableData = [
|
|
{
|
|
date: '2016-05-02',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1518 弄'
|
|
}, {
|
|
date: '2016-05-04',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1517 弄'
|
|
}, {
|
|
date: '2016-05-01',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1519 弄'
|
|
}, {
|
|
date: '2016-05-03',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1516 弄'
|
|
}
|
|
]
|
|
|
|
export default defineComponent({
|
|
// name: 'StateTable',
|
|
components: {
|
|
ComTable
|
|
},
|
|
setup() {
|
|
const loading = ref<boolean>(true)
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
}, 1000)
|
|
|
|
function tableRowClassName({ rowIndex }: any) {
|
|
if (rowIndex === 1) {
|
|
return 'warning-row'
|
|
} else if (rowIndex === 3) {
|
|
return 'success-row'
|
|
}
|
|
return ''
|
|
}
|
|
|
|
return {
|
|
columns,
|
|
tableData,
|
|
loading,
|
|
tableRowClassName
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@{deep}(.el-table) {
|
|
.warning-row {
|
|
background: oldlace;
|
|
}
|
|
}
|
|
|
|
@{deep}(.el-table) {
|
|
.success-row {
|
|
background: #f0f9eb;
|
|
}
|
|
}
|
|
</style>
|