94 lines
2.4 KiB
Vue
94 lines
2.4 KiB
Vue
<template>
|
|
<div style="padding: 10px">
|
|
<el-table
|
|
ref="table"
|
|
v-loading="crud.loading"
|
|
highlight-current-row
|
|
style="width: 100%;"
|
|
:data="crud.data"
|
|
border
|
|
@selection-change="crud.selectionChangeHandler"
|
|
>
|
|
<el-table-column type="selection" width="55" />
|
|
<div v-for="(item, index) in tableHeader" :key="index">
|
|
<el-table-column
|
|
v-if="item.code === 'level' && item.is_hidden === '0'"
|
|
:prop="item.code"
|
|
:label="item.name"
|
|
:width="item.width"
|
|
:align="item.align"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-switch
|
|
v-model="scope.row.level === 1"
|
|
active-color="#13ce66"
|
|
inactive-color="#ff4949"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-else-if="item.code === 'name' && item.is_hidden === '0'"
|
|
:label="item.name"
|
|
:width="item.width"
|
|
:align="item.align"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-tag type="success">
|
|
{{ scope.row.name }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-else-if="item.is_hidden === '0'"
|
|
:prop="item.code"
|
|
:label="item.name"
|
|
:width="item.width"
|
|
:align="item.align"
|
|
/>
|
|
</div>
|
|
<el-table-column label="操作" align="center">
|
|
<template slot-scope="scope">
|
|
<el-button size="mini" type="danger" icon="el-icon-minus" @click="del(scope.row)" />
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import crudGridFields from '@/api/system/gridField'
|
|
import CRUD, { crud, header, presenter } from '@crud/crud'
|
|
import crudRoles from '@/api/system/role'
|
|
|
|
const role_grid_code = 'roleGrid' // 定义角色表格样式code
|
|
export default {
|
|
name: 'TableTest',
|
|
cruds() {
|
|
return CRUD({ title: '角色', url: 'api/roles', sort: 'level,asc', crudMethod: { ...crudRoles }})
|
|
},
|
|
mixins: [presenter(), header(), crud()],
|
|
data() {
|
|
return {
|
|
tableHeader: []
|
|
}
|
|
},
|
|
created() {
|
|
this.initRoleGridData()
|
|
},
|
|
methods: {
|
|
initRoleGridData() { // 获取表格字段属性
|
|
crudGridFields.getGridFieldsByCode(role_grid_code).then(res => {
|
|
this.tableHeader = res
|
|
})
|
|
},
|
|
del(row) {
|
|
console.log(row)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|