@@ -0,0 +1,46 @@ | |||
<template> | |||
<n-switch v-bind="getSwitchProps" v-model:value="switchVlue" @update:value="changeValue" /> | |||
</template> | |||
<script> | |||
import { defineComponent, ref, unref, computed } from 'vue' | |||
import { NSwitch } from 'naive-ui' | |||
export default defineComponent({ | |||
name: 'TableSwitch', | |||
props: { | |||
...NSwitch.props, | |||
data: { | |||
type: [Object, String, Number, Boolean], | |||
required: true | |||
}, | |||
rowKey: { | |||
type: String, | |||
default: '' | |||
} | |||
}, | |||
emits: ['getRow'], | |||
setup(props, { emit }) { | |||
const switchVlue = ref() | |||
const { data, rowKey } = unref(props) | |||
switchVlue.value = rowKey ? data[rowKey] : data | |||
const getSwitchProps = computed(() => { | |||
return { | |||
...unref(props) | |||
} | |||
}) | |||
function changeValue(value) { | |||
const { data } = props | |||
const params = { | |||
data, | |||
value | |||
} | |||
emit('getRow', params) | |||
} | |||
return { | |||
switchVlue, | |||
getSwitchProps, | |||
changeValue | |||
} | |||
} | |||
}) | |||
</script> |
@@ -23,6 +23,7 @@ import dataTable from '@/components/DataTable/index.vue' | |||
import TableAction from '@/components/DataTable/tools/Action.vue' | |||
import TableImage from '@/components/DataTable/tools/Image.vue' | |||
import TableTags from '@/components/DataTable/tools/Tags.vue' | |||
import TableSwitch from '@/components/DataTable/tools/Switch.vue' | |||
import { getUserList } from '@/api/system/user/index.js' | |||
import { h, unref, ref } from 'vue' | |||
import { reactive } from 'vue' | |||
@@ -82,7 +83,16 @@ export default { | |||
title: '状态', | |||
key: 'status', | |||
align: 'center', | |||
width: 100 | |||
width: 100, | |||
render(row) { | |||
return h(TableSwitch, { | |||
data: row, | |||
rowKey: 'status', | |||
checkedValue: 1, | |||
uncheckedValue: 2, | |||
onGetRow: getSwitch.bind(row) | |||
}) | |||
} | |||
}, | |||
{ | |||
title: '部门', | |||
@@ -158,6 +168,10 @@ export default { | |||
data.modalShow = true | |||
} | |||
function getSwitch(row) { | |||
console.log(row) | |||
} | |||
return { data, loadDataTable, handleUser, rowData, modalTitle } | |||
} | |||
} |