@TOC在这里插入代码片
<template>
<el-card>
<el-row :gutter="20">
<el-col :span="7">
<el-input
:placeholder="$t('table.placeholder')"
type="text"
v-model="queryForm.query"
></el-input>
</el-col>
<el-button type="primary" :icon="Search" @click="initGetUserList">{
{
$t('table.search')
}}</el-button>
<el-button type="primary" @click="handleDialogValue()">{
{
$t('table.adduser')
}}</el-button>
</el-row>
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column
v-for="(item, index) in options"
:prop="item.prop"
:label="$t(`table.${item.label}`)"
:key="index"
>
<template v-slot="{ row }" v-if="item.prop === 'mg_state'"
><el-switch v-model="row.mg_state" @change="changeUserState(row)" />
</template>
<template v-slot="{ row }" v-else-if="item.prop === 'create_time'"
>{
{ $filters.filterTimes(row.create_time) }}
</template>
<template #default="{ row }" v-else-if="item.prop === 'action'">
<el-button
type="primary"
size="small"
:icon="Edit"
@click="handleDialogValue(row)"
/>
<el-button type="warning" size="small" :icon="Setting" />
<el-button
type="danger"
size="small"
:icon="Delete"
@click="delUser(row)"
/>
</template>
</el-table-column>
</el-table>
<el-pagination
v-model:currentPage="queryForm.pagenum"
:page-sizes="[2, 5, 10, 15]"
:page-size="queryForm.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@initUserList="initGetUserList"
/>
</el-card>
<Dialog
v-model="dialogVisible"
:dialogTitle="dialogTitle"
v-if="dialogVisible"
:dialogTableVal="dialogTableVal"
/>
</template>
<script setup>
import {
Search, Edit, Delete, Setting } from '@element-plus/icons-vue'
import {
getUser, getUserState, deleteUser } from '@/api/user.js'
import {
ref } from 'vue'
import {
options } from './options'
import {
ElMessage, ElMessageBox } from 'element-plus'
import {
useI18n } from 'vue-i18n'
import Dialog from './component/dialog.vue'
// import isNull from '@/util/filters'
const i18n = useI18n()
const queryForm = ref({
query: '',