代码拉取完成，页面将自动刷新
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Element UI 扩展</title>
<link href="./wwwroot/elementui/index.min.css" rel="stylesheet" />
<style scoped>
</style>
</head>
<body>
<div id="main" v-cloak>
<el-main>
<el-row type="flex" align="center">
<el-extend-search :search="handleLoadData"
:open-add-dialog="handleOpenDialog"
:filter-json="filterJson"
:show-search="true"
:show-add="true"
:show-refresh="true">
</el-extend-search>
</el-row>
<el-row type="flex" align="center">
<el-col :span="24" style="padding: 10px 0 0 0;">
<el-extend-table :columns="columns"
:tool-visible="false"
:table-data="tableData"
primary-key="name"
:load-data="handleLoadData"
:view-detail="viewDetailDialog"
:handle-edit="handleOpenDialog"
:handle-delete="handleDelete"></el-extend-table>
</el-col>
</el-row>
</el-main>
<el-extend-form :form-json="formJson"
:submit="submitForm"
:form-data="formData"
v-loading.fullscreen.lock="loading"
:close-confirm="true"
:dialog-width="dialogWidth"
:dialog-visible="dialogVisible" :cancel="handleClose" :footer-visible="footerVisible"></el-extend-form>
</div>
<script type="text/javascript" src="./wwwroot/vue/vue.js?v=2.0"></script>
<script type="text/javascript" src="./wwwroot/vue/vue-i18n.min.js?v=2.0"></script>
<script type="text/javascript" src="./wwwroot/elementui/index.min.js"></script>
<!-- <script>
Vue.prototype.i18n.messages.zhCN = { "confirmexit": "确认退出?", "tips": "提示", "determine": "确定", "cancel": "取消", "changepassword": "修改密码", "logout": "退出", "aresureclose": "确认关闭?", "browserversionlow": "您的浏览器版本过低，无法显示报表内容！建议升级浏览器或更换浏览器！", "pleaseenter": "请输入", "pleasechoose": "请选择", "pleaseenternumber": "请输入数字", "pleaseselectdatetime": "请选择日期时间", "pleaseselectdate": "请选择日期", "pleaseselecttime": "请选择时间", };
</script> -->
<script type="text/javascript" src="./wwwroot/vue/axios.min.min.js"></script>
<script>
var $taskVue = new Vue({
el: "#main",
data() {
return {
filterJson: [
{
"type": "input",
"label": "大大姓名",
"prop": "name",
"default": ""
},
{
"type": "select",
"label": "性别",
"prop": "gender",
"default": null,
"options": [
{ "label": "男", "value": "male" },
{ "label": "女", "value": "female" }
]
},
{
"type": "switch",
"label": "是否同意",
"prop": "isAgree",
"default": false
},
{
"type": "datetimepicker",
"label": "预约时间",
"prop": "appointmentTime",
"default": null,
"placeholder": "请选择预约时间",
"format": "yyyy-MM-dd HH:mm:ss",
"valueFormat": "yyyy-MM-dd HH:mm:ss",
"dateTimePickerType": "datetime"
},
{
"type": "radio",
"label": "爱好",
"prop": "hobby",
"default": undefined,
"options": [
{ "label": "足球", "value": "soccer" },
{ "label": "篮球", "value": "basketball" }
]
},
{
"type": "checkbox",
"label": "技能",
"prop": "skills",
"default": [],
"options": [
{ "label": "编程", "value": "coding" },
{ "label": "设计", "value": "design" },
{ "label": "测试", "value": "test" },
{ "label": "部署", "value": "uat" },
]
}
],
filter: {},
tableData: [
{
"name": "张三",
"appointmentTime": "2024-08-22",
"gender": "male",
"isAgree": true,
"quantity": 10,
"hobby": "soccer",
"skills": ["coding", "design"]
},
{
"name": "李四",
"appointmentTime": "2024-08-23",
"gender": "female",
"isAgree": false,
"quantity": 5,
"hobby": "basketball",
"skills": ["design", "test"]
},
{
"name": "王五",
"appointmentTime": "2024-08-24",
"gender": "male",
"isAgree": true,
"quantity": 20,
"hobby": "soccer",
"skills": ["coding", "uat"]
},
{
"name": "赵六",
"appointmentTime": "2024-08-25",
"gender": "female",
"isAgree": true,
"quantity": 15,
"hobby": "basketball",
"skills": ["coding", "design", "test"]
},
{
"name": "孙七",
"appointmentTime": "2024-08-26",
"gender": "male",
"isAgree": false,
"quantity": 5,
"hobby": "soccer",
"skills": ["test", "uat"]
},
{
"name": "周八",
"appointmentTime": "2024-08-27",
"gender": "female",
"isAgree": true,
"quantity": 10,
"hobby": "basketball",
"skills": ["coding", "design"]
},
{
"name": "吴九",
"appointmentTime": "2024-08-28",
"gender": "male",
"isAgree": true,
"quantity": 20,
"hobby": "soccer",
"skills": ["design", "test", "uat"]
},
{
"name": "郑十",
"appointmentTime": "2024-08-29",
"gender": "female",
"isAgree": false,
"quantity": 15,
"hobby": "basketball",
"skills": ["coding", "uat"]
},
{
"name": "王十一",
"appointmentTime": "2024-08-30",
"gender": "male",
"isAgree": true,
"quantity": 25,
"hobby": "soccer",
"skills": ["coding", "design", "test"]
},
{
"name": "陈十二",
"appointmentTime": "2024-08-31",
"gender": "female",
"isAgree": true,
"quantity": 30,
"hobby": "basketball",
"skills": ["coding", "design", "test", "uat"]
}
],
columns: [
{
prop: "name",
label: "姓名", textAlign: "center",
width: 180
},
{
prop: "appointmentTime",
label: "预约时间",
width: 180
},
{
prop: "gender",
label: "性别", textAlign: "center",
width: 180
}, {
prop: "isAgree",
label: "是否同意", textAlign: "center",
formatter: (row, column, cellValue) => {
return cellValue ? `是` : `否`;
},
width: 180
}, {
prop: "quantity",
label: "数量", textAlign: "center",
width: 180
},
{
prop: "hobby", showOverflowTooltip: true,
label: "爱好"
}, {
prop: "skills", showOverflowTooltip: true,
label: "技能"
},
],
dialogVisible: false,
footerVisible: true,
dialogWidth: "40%",
buttonSize: "small",
loading: false,
initFormData: {},
formData: {},
formJson: [{
type: 'input',
label: '大大姓名',
prop: 'name',
default: '', // 默认值为空字符串
rules: [{ required: true, message: '姓名不能为空', trigger: 'blur' }]
},
{
type: 'select',
label: '性别',
prop: 'gender', default: null, // 对于选择类型，默认值可以设置为 null
options: [
{ label: '男', value: 'male' },
{ label: '女', value: 'female' }
],
rules: [{ required: true, message: '性别不能为空' }]
},
{
type: 'switch',
label: '是否同意',
prop: 'isAgree',
default: false, // 开关默认状态为 false，表示关闭
rules: [{ required: true, message: '请确认是否同意', trigger: 'change' }]
},
{
type: 'datetimepicker',
label: '预约时间',
prop: 'appointmentTime',
default: null, // 可以设置默认值，也可以不设置
placeholder: '请选择预约时间',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd',
dateTimePickerType: 'datetime', // 可以是 'date' | 'datetime' | 'year' | 'month' | 'time' 等
rules: [
{ required: true, message: '预约时间不能为空', trigger: 'change' }
]
},
{
type: 'number', // 新增的数字输入框类型
label: '数量',
prop: 'quantity',
min: 1, // 最小值
max: 100, // 最大值
step: 1, // 步长
placeholder: '请输入数量', // 占位符
default: 1, // 默认值
rules: [{ required: true, message: '数量不能为空', trigger: 'blur' },
{ type: 'number', message: '数量必须为数字', trigger: 'blur' }]
},
{
type: 'radio',
label: '爱好',
prop: 'hobby', default: undefined, // 单选默认值可以设置为 undefined 或第一个选项的值
options: [
{ label: '足球', value: 'soccer' },
{ label: '篮球', value: 'basketball' }
// 可以添加更多选项
],
rules: [{ required: true, message: '请选择爱好', trigger: 'change' }]
},
{
type: 'checkbox',
label: '技能',
prop: 'skills', default: [], // 多选默认值应为数组
options: [
{ label: '编程', value: 'coding' },
{ label: '设计', value: 'design' },
{ label: '测试', value: 'test' },
{ label: '部署', value: 'uat' },
],
rules: [{ required: true, message: '请选择至少一个技能', trigger: 'change' }]
}
],
}
},
created() { this.initForm(); this.handleLoadData(); },
mounted: function () { },
methods: {
initForm() {
this.formJson.forEach(item => { this.$set(this.formData, item.prop, item.default); });
this.initFormData = this.formData;
},
handleOpenDialog(e) {
if (e) { this.formData = e.row; }
else {
this.formData = this.initFormData;
}
this.dialogVisible = true;
},
handleClose(e) {
this.dialogVisible = e;
},
viewDetailDialog(e) {
console.info("viewDialogForm 打开详情弹窗方法")
this.dialogVisible = true;
if (e) {
this.formData = e.row;
}
},
handleLoadData(e) {
console.log("查询条件", e);
if (e)
this.filter = e.filter;
this.loading = true;
},
handleDelete(e) {
console.log("handleDelete", e);
return false;
},
submitForm(data) {
console.log("表单提交方法", data)
},
},
filters: {
scheduleTypeTitle(data) {
return data.scheduleTypeText + ":" + data.runTypeText;
}
}
});
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
