前端组件总结

1.Input标签

HTML标签

<el-input v-model="searchTempName" placeholder="请输入模板名称" style="width: 200px"></el-input>

2.Button按钮

HTML标签

<el-button @click="isDialog = false">取消</el-button>

3.Select下拉组件

HTML标签

<el-select v-model="form.bk_biz_name" placeholder="请输入业务名称" class="modal1">
    <el-option
        v-for="item in businessData"
        :value="item.bk_biz_id +':'+item.bk_biz_name"
        :label="item.bk_biz_name"
        :key="item.bk_biz_id +':'+item.bk_biz_name">{{item.bk_biz_name}}
    </el-option>
</el-select>

4.Model模态框与Form表单合用(比如:新建模态框和修改模态框)

HTML标签

<!-- 新增的对话框 -->
<el-dialog title="新增巡检模板" :visible.sync="addDialog">
    <el-form ref='form' :model='addForm' label-width="80px" :rules="addRules">
        <el-form-item label="选择业务" prop="bk_biz_name">
            <el-select v-model="addForm.bk_biz_name" placeholder="请输入业务名称" class="modal1">
                <el-option
                    v-for="item in businessData"
                    :value="item.bk_biz_id +':'+item.bk_biz_name"
                    :label="item.bk_biz_name"
                    :key="item.bk_biz_id +':'+item.bk_biz_name">{{item.bk_biz_name}}
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="模板名称" prop="temp_name">
            <el-input v-model="addForm.tempName" placeholder="请输入模板名称" class="modal1"></el-input>
        </el-form-item>
        <el-form-item label="巡检脚本" prop="script">
            <el-input v-model="addForm.tempScript" type="textarea" placeholder="请输入巡检脚本" class="modal1"></el-input>
        </el-form-item>
        <el-form-item label="模板阀值" prop="value">
            <el-input v-model="addForm.tempValue" placeholder="请输入模板阀值" class="modal1"></el-input>
        </el-form-item>
        <el-form-item label="模板备注" prop="note">
            <el-input v-model="addForm.tempNote" type="textarea" placeholder="请输入备注" class="modal1"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="addDialogOk">立即创建</el-button>
            <el-button @click="addDialog = false">取消</el-button>
        </el-form-item>
    </el-form>
</el-dialog>

标签绑定的方法

<script>
export default {
    data () {
        return {
            ...
            // 新增模板模态框
            addDialog: false,
            // 添加模板模态对话框的表单数据
            form: {
                bk_biz_name: '',
                tempName: '',
                tempScript: '',
                tempValue: '',
                tempNote: '',
            },
            // 添加模板的表单验证规则
            addRules: {
                bk_biz_name: [
                    { required: true, message: '请选择业务', trigger: 'blur' },
                ],
                temp_name: [
                    { required: true, message: '请输入模板名称', trigger: 'change' }
                ],
                script: [
                    { required: true, message: '请输入执行脚本', trigger: 'change' }
                ],
                value: [
                    { type: 'number', required: true, message: '请输入阀值', trigger: 'change' }
                ],
                note: [
                    { required: true, message: '请输入备注', trigger: 'change' }
                ]
            },
        }
    },
    mounted () {
        // 页面加载就获取所有业务
        getAppList().then(res => {
            if(res.result) {
                this.businessData = res.data
                this.bkBizList = res.data
                this.$set(this.bkBizList, res.data)
            } else {
                this.$Message.error('请求错误！')
            }
        })
        // 页面加载就获取所有模板
        this.init()
    },
    methods: {
        // 初始化获取所有模板
        init() {
            ...
        },
        // 添加模板信息后确定按钮触发的方法
        addDialogOk() {
            addTemp({
                bk_biz_id: this.form.bk_biz_name.split(':')[0],
                bk_biz_name: this.form.bk_biz_name.split(':')[1],
                temp_name: this.form.tempName,
                temp_script: this.form.tempScript,
                temp_value: this.form.tempValue,
                note: this.form.tempNote
            }).then(res => {
                if(res.result) {
                    this.addDialog = false
                    this.$Message.success('添加模板成功!')
                    this.init()
                    // 清空数据
                    this.form.bk_biz_name = null
                    this.form.tempName = ''
                    this.form.tempScript = ''
                    this.form.tempValue = ''
                    this.form.tempNote = ''
                } else {
                    this.$Message.error('请求错误!添加模板失败!')
                }
            })
        },
    }
}
</script>

5.Radio标签

<el-radio-group v-model="radio" @change="radioChange">
    <el-radio :label="3" style="width:100%;margin-left:30px;">备选项</el-radio>
    <el-radio :label="6" style="width:100%;margin-left:30px;">备选项</el-radio>
    <el-radio :label="9" style="width:100%;margin-left:30px;">备选项</el-radio>
</el-radio-group>

方法:

<script>
export default {
    data() {
        return {
            radio: '',
        }
    },
    methods: {
        radioChange() {
            console.log(this.radio)
        }
    }
}
</script>

6.CheckBox多选框

<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>

方法:

<script>
export default {
    data() {
        return {
            checkedCities: [],
            cities: [],
        }
    },
    mounted() {
        // 页面加载就获取所有模板
        this.init()
    },
    methods: {
        // 初始化获取所有模板
        init() {
            this.cities = ['上海', '北京', '广州', '深圳']
        },
        handleCheckedCitiesChange(value) {
            console.log(this.checkedCities)
        }
    }
}
</script>

7.InputNumber计数器

<el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>

方法:

<script>
export default {
    data() {
        return {
            num: 1
        }
    },
    mounted() {
        // 页面加载就获取所有模板
        this.init()
    },
    methods: {
        // 初始化获取所有模板
        init() {
        },
        handleChange(value) {
            console.log(value);
        }
    }
}
</script>

8.Switch开关组件

<el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" @change="checkSwitch"></el-switch>

方法:

<script>
export default {
    data() {
        return {
            value: true
        }
    },
    mounted() {
        // 页面加载就获取所有模板
        this.init()
    },
    methods: {
        // 初始化获取所有模板
        init() {
        },
        checkSwitch(value) {
            console.log(value);
        }
    }
}
</script>

9.Rate评分组件

<el-rate v-model="value1" @change="changeRate"></el-rate>

方法:

<script>
export default {
    data() {
        return {
            value1: null
        }
    },
    mounted() {
        // 页面加载就获取所有模板
        this.init()
    },
    methods: {
        // 初始化获取所有模板
        init() {
        },
        changeRate(value) {
            console.log(value);
        }
    }
}
</script>

10.Transfer穿梭框

<el-transfer v-model="transferValue" :props="{key: 'value',label: 'value'}" :data="transferData" @change="changeTransfer"></el-transfer>

方法:

<script>
export default {
    data() {
        return {
            transferData: [],
            transferValue: []
        };
    },
    mounted() {
        // 页面加载就获取所有模板
        this.init()
    },
    methods: {
        // 初始化获取所有模板
        init() {
            this.transferData = [
                {
                    'key': 1,
                    'value': '首选项1'
                },
                {
                    'key': 2,
                    'value': '首选项2'
                },
                {
                    'key': 3,
                    'value': '首选项3'
                },
                {
                    'key': 4,
                    'value': '首选项4'
                },
                {
                    'key': 5,
                    'value': '首选项5'
                }
            ]
        },
        changeTransfer(value) {
            console.log(value);
        }
    }
}
</script>

11.TimePicker时间选择器

单个时间选择器

<el-time-select v-model="value" placeholder="选择时间" @change="changeTimeSelect"></el-time-select>

时间段选择器

<el-time-select placeholder="起始时间" v-model="startTime" @change="changeStartTime"></el-time-select>
<el-time-select placeholder="结束时间" v-model="endTime" :picker-options="{minTime: startTime}" @change="changeEndTime"></el-time-select>

方法:

<script>
export default {
    data() {
        return {
            value: '',
            startTime: '',
            endTime: '',
        };
    },
    mounted() {
        // 页面加载就获取所有模板
        this.init()
    },
    methods: {
        // 初始化获取所有模板
        init() {

        },
        changeTimeSelect(value) {
            console.log(value);
        },
        changeStartTime(value) {
            console.log(value);
        },
        changeEndTime(value) {
            console.log(value);
        },
    }
}
</script>

12.DatePicker日期选择器

12.1 选择单个日期

<el-date-picker
    v-model="value0"
    type="date"
    format="yyyy-MM-dd"
    value-format="yyyy-MM-dd"
    placeholder="选择日期" @change="changeDataPicker1">
</el-date-picker>

方法:

<script>
export default {
    data() {
        return {
            value0: '',
        };
    },
    mounted() {
        // 页面加载就获取所有模板
        this.init()
    },
    methods: {
        // 初始化获取所有模板
        init() {

        },
        changeDataPicker1(value) {
            console.log(value);
        }
    }
}
</script>

12.2 选择月份

<el-date-picker
v-model="value2"
type="month"
format="yyyy-MM"
value-format="yyyy年MM月"
placeholder="选择月" @change="changeDataPicker1">
</el-date-picker>

方法:

<script>
export default {
    data() {
        return {
            value2: '',
        };
    },
    mounted() {
        // 页面加载就获取所有模板
        this.init()
    },
    methods: {
        // 初始化获取所有模板
        init() {

        },
        changeDataPicker1(value) {
            console.log(value);
        }
    }
}
</script>

12.3 选择年份

<el-date-picker
v-model="value3"
type="year"
format="yyyy年"
value-format="yyyy年"
placeholder="选择年"  @change="changeDataPicker1">
</el-date-picker>

方法:

<script>
export default {
    data() {
        return {
            value3: '',
        };
    },
    mounted() {
        // 页面加载就获取所有模板
        this.init()
    },
    methods: {
        // 初始化获取所有模板
        init() {

        },
        changeDataPicker1(value) {
            console.log(value);
        }
    }
}
</script>

12.4 选择多个天数

<el-date-picker
type="dates"
v-model="value4"
value-format="yyyy-MM-dd"
placeholder="选择一个或多个日期"  @change="changeDataPicker1">
</el-date-picker>

方法:

<script>
export default {
    data() {
        return {
            value4: '',
        };
    },
    mounted() {
        // 页面加载就获取所有模板
        this.init()
    },
    methods: {
        // 初始化获取所有模板
        init() {

        },
        changeDataPicker1(value) {
            console.log(value);
        }
    }
}
</script>

12.5 选择间隔日期

<el-date-picker
v-model="value5"
type="daterange"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期" @change="changeDataPicker1">
</el-date-picker>

方法:

<script>
export default {
    data() {
        return {
            value5: '',
        };
    },
    mounted() {
        // 页面加载就获取所有模板
        this.init()
    },
    methods: {
        // 初始化获取所有模板
        init() {

        },
        changeDataPicker1(value) {
            console.log(value);
        }
    }
}
</script>

13.DateTimePicker日期时间选择器

13.1 选择单个日期时间,获取格式为时间字符串

<el-date-picker
    v-model="value1"
    type="datetime"
    value-format="yyyy-MM-dd HH:mm:ss"
    placeholder="选择日期时间" @change="changeDatePicker1">
</el-date-picker>

把value-format改为:value-format="timestamp"可以把获取到的时间转换成时间戳格式
方法:

<script>
export default {
    data() {
        return {
            value1: '',
        };
    },
    mounted() {
        // 页面加载就获取所有模板
        this.init()
    },
    methods: {
        // 初始化获取所有模板
        init() {

        },
        changeDatePicker1(value) {
            console.log(value);
        }
    }
}
</script>

13.2 选择日期和时间范围

<el-date-picker
    v-model="value1"
    type="datetimerange"
    value-format="yyyy-MM-dd HH:mm:ss"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期" @change="changeDatePicker1">
</el-date-picker>

方法:

<script>
export default {
    data() {
        return {
            value1: '',
        };
    },
    mounted() {
        // 页面加载就获取所有模板
        this.init()
    },
    methods: {
        // 初始化获取所有模板
        init() {

        },
        changeDatePicker1(value) {
            console.log(value);
        }
    }
}
</script>