Initialize data

handlePropsData () { let obj = {} let keys = Object.keys(this.editData) keys.forEach((key) => { if (key === 'topLogo' ||  key === 'topPic') { obj[key] = [] } else { obj[key] = this.editData[key] } }) this.ruleForm = obj },Copy the code

Radio buttons

  • When a checkbox is bound to a number of type number, it is preceded by a colon (:)

  • Use V-model for input box bindings, not official :value.sync

  • Adding clearable to the input of the Form displays a clear button at the end

  • Drop-down box optimization:

<Select v-model="params.type" clearable> <Option :value="type.value" v-for="type in typeList" :key="type.value">{{type.label}}</Option> </Select> typeList: [{value: 1, label: 'new power'}, {value: 0, label: 'influence'}],Copy the code

Modal dialog

  • If you write a property and it doesn’t work, add one:Try it. Be sure to use colon binding

  • You put a fullscreen on Modal to fill the fullscreen

<Modal title=" new "@on-visible-change='changeShow' : mask-Closable ='false' fullscreen> </Modal>Copy the code

  • Hide bottom button of Modal box (add to Modal) : :footer-hide=”true”

  • The on-visible-change method is triggered when the modal box changes (click on the mask to disappear).

  • You can customize the footer to remove the confirm and cancel buttons in the modal box :(slot=”footer”)

<Modal V-model ="data" title=" title "> <div slot="footer"> <i-button @click="handleReset()"> Cancel </i-button> <i-button Type ="primary" @click="handleSubmit('formData')"> Submit </i-button> </div> </Modal>Copy the code

Table form

  • Render (h,params) render(h,params) render(h,params

  • Loading :true (:loading=”loading” loading:true)

  • The data in the Table box is too long, and all data details are displayed when you move the mouse

{title: 'description ', align: 'center', ellipsis: true, render: Return h('div', [h('span', {style: {display: 'inline-block', width: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, domProps: { title: params.row.description } }, params.row.description) ]); }},Copy the code
  • Table renders different content
Render: {title: "render ", key: "status", render: (h, params) => {let text = ""; // console.log(params.row.status); If (params.row.status === "untreated") {text = "untreated"; } else if (params.row.status === "right") {text = "no modification "; } else if (params.row.status === "modified") {text = "modified"; } else {text = "to be determined "; } return h("div", [ h( "div", { props: {} }, text ) ]); }},Copy the code
  • Table Click the link in the table to jump
{title: "query", key: "query", render: (h, params) => { let url = "http://www.sogoucn.com/wap.html?iploc=110000&dbg=off&vdbg=off&query=" + params.row.query; return h( "a", { attrs: { href: url, target: "_black" } }, params.row.query ); }},Copy the code
  • Table uses slot rendering
// Table <Table :loading="loading" :columns="columns" @on-sort-change='changeSort' :data="tableData"> <template <Button size="small" type="primary" @click="editWeek(row)"> edit </Button> <Button Size ="small" type="error" @click="deleteWeek(row)"> </Button> </template> </Table> 'personID', key: 'personID', sortable: true, sortMethod: (a, b, type) => {}}, {title: 'name ', key: 'personName'}, {title: 'operation ', key: 'option', slot: 'option', width: 180}],Copy the code
  • Table Click to enlarge image
Render: (h, params) => {let _img = params.row. Image? config.default.baseUrl.dev+'/'+params.row.image:''; // Only one image is returned in the background, of type String. let imgs = [_img]; If (_img){return h('viewer', {props:{images:imgs // array}}, imgs.map(img=>{// loop display h('img', {attrs: { src: img, style: 'width: 40px; height: 40px; '}}); }) ) }else{ return h("span", ''); }}},Copy the code
  • Set the table header of the table
{ key: 'id', align: 'center', renderHeader: (h, params) => { return h("div", [ h( "div", { props: {} }, 'ID' ) ]); }},Copy the code
  • Table Custom sorting
<Table :loading="loading" :columns="columns" @on-sort-change='changeSort' :data="tableData"> </Table> // data sort: Asc desc Columns: [{title: 'personID', key: 'personID', sortable: true, sortMethod: [{title: 'personID', key: 'personID', sortable: true, sortMethod: (a, b, type) => {} // reset sortMethod}, {title: 'year', key: 'year', sortable: true, sortMethod: (a, b, type) => {}},], changeSort (para) {console.log(para) // Key para.order === 'normal'? This.sortby = ": this.sortby = para.order this.sort = para.key this.getList()},Copy the code
  • Table Table button operation
{title: 'action', key: 'action', align: 'center', render: Function (h, params) {return h('div', [h('Button', {// render Button props: {type: 'primary', size: 'small'}, style: { marginRight: '8px' }, on: { click: Function () {McHeck.singleshow (params.row);}}}, 'check '), h('icon', {// Props: {type: 'md-arrow-dropup', size: 'small' }, style: { marginRight: '5px' }, on: { click: () => {this.edit (params.row)}}}), h('i-switch', {// Render switch props: {type: 'primary', value: 'params.row.else', // disabled: // size: '20'}, style: {marginRight: '5px',}, on: {// Manipulate event 'on-change': Console. log(value) //true false}}}), h('img', {// Render image attrs: { src: params.row.avatarUrl, style: 'width: 100px;border-radius: Margin-top :4px;' // image in table},}), h('span', {// custom render '#31708f'}}, params.row.orange + '℃ '),]; }}Copy the code

The Form validation

<template> <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"> <Form-item Label ="ID" prop=" ID" >< I-input V-model =" formvalidate. ID" number placeholder=" maxLength ="5" clearable></i-input> </ form-item > < form-item label="MID" prop=" MID" > <i-input V-model =" formvalidate. MID" placeholder=" please input MID" number Clearable ></i-input> </ form-item >< form-item label=" name"> <i-input V-model =" formvalidate.name" Placeholder =" please input name "clearable></i-input> </ form-item >< form-item label=" mailbox" prop="mail"> <i-input V-model =" formvalidate. mail" placeholder=" please input "></i-input> </ form-item >< form-item label=" city" prop="city"> <i-select V-model =" formvalidate. city" placeholder=" select location "> <i-option value=" Beijing "> </i-option> <i-option Value =" Shanghai "> Shanghai </i-option> <i-option value=" Shenzhen "> </i-option> </i-select> </ form-item > < form-item label=" Gender" Prop ="gender"> < radio-group V-model =" formvalidate. gender"> <Radio label="male"> male </Radio> <Radio Label ="female"> female </Radio> </ radio-group > </ form-item > < form-item label=" gender number type "prop="gender"> < radio-group v-model="formValidate.sex"> <! If it is a numeric type, you must add: <Radio :label=1> Male </Radio> <Radio :label=0> female </Radio> </ radio-group > </ form-item > < form-item label=" love" Prop ="interest"> < checkbox-group V-model =" formvalidate. interest"> <Checkbox label=" eat "></Checkbox> <Checkbox Label =" sleep "></Checkbox> <Checkbox label=" run "></Checkbox> <Checkbox label=" watch movie "></Checkbox> </ checkbox-group ></ form-item > < form-item label=" prop="desc"> <i-input V-model =" formvalidate. desc" type="textarea" :autosize="{minRows: 3,maxRows: placeholder=" placeholder" </i-input> </ form-item >< i-button type="primary" @click="handleSubmit('formValidate')"> <i-button @click="handleReset('formValidate')" style="margin-left: </i-button> </ form-item > </i-form> </template> <script> export default {data () {const validateMID = (rule, Value, callback) => {if (value === '') {callback(new Error(' cannot be null ')); } else if (! Number. IsInteger (+value)) {callback(new Error(' Please input a Number ')); } else if (String(value).length >= 8) {callback(new Error(' too long ')); } else if (String(value).length <= 1) {callback(new Error(' long too short '))} else {callback(); }}; return { formValidate: { id: '', mid: '', name: '', mail: '', city: '', sex: '', gender: '', interest: [], desc: }, ruleValidate: {id: [{required: true, type: 'number', message: 'ID cannot be empty and must be a number type ', trigger: 'blur'},], mid: {id: [{required: true, type: 'number', message: 'ID cannot be empty and must be a number type ', trigger: 'blur'},], mid: [ { required: true, validator: validateMID, trigger: 'change' } ], name: [ { required: true, message: 'Name cannot be empty ', trigger: 'blur'}], mail: [{required: true, message:' mailbox cannot be empty ', trigger: 'blur'}, {type: 'email', message: 'email format incorrect ', trigger: 'blur'}], // note that the type of value must be String, if the type is number, add type:'number' city: [{required: true, message: 'Please select city ', trigger: 'change'}], gender: [{required: true, message:' Please select gender ', trigger: 'change'}], sex: [{required: true, message: 'please select numeric gender ', trigger: 'change'}], interest: [{required: true, type: 'Array ', min: 1, message:' Select at least one hobby ', trigger: 'change'}, {type: 'array', Max: 2, message: 'Select at most two hobbies ', trigger: 'change'}], desc: [{required: true, message: 'Please enter personal information ', trigger: 'blur'}, {type: 'string', min: 20, message: Trigger: 'blur'}},}}, methods: { handleSubmit (name) { this.$refs[name].validate((valid) => { if (valid) { console.log(this.formValidate); This.$message. success(' Submitted successfully! '); } else {this.$message. error(' Form validation failed! '); } }) }, handleReset (name) { this.$refs[name].resetFields(); } } } </script>Copy the code
  • Table Contents in the table click to jump
render: (h, params) => {
	let url = "xxxxxxxxxx" + params.row.fixID;
	return h(
	  "a",
	  {
		attrs: {
		  href: url,
		  target: "_black"
		}
	  },
	  params.row.fixID
	);
}
Copy the code
  • Table table contents render images
{title: 'image ', align: 'center', width: 90, render: (h, params) => {return h("img", {attrs: {SRC: params.row.picurl }, style: { width: '60px', height: '80px' // display: 'block' } }); }}Copy the code

  • Render multiple contents in a table

Render: {title: "", align: "center", width: 160, render: (h, params) => {return h("div", [h("img", {attrs: {SRC: params.row.imgRawUrl }, style: { width: "160px", // height: "160px", padding: "5px 5px 0px 5px"}}), h("div", {style: {}}, "image type:" + params.row.imgRawType), h("div", {style: {}}, "+ params.row.imgRawWidth +" * "+ params.row.imgrawheight)]); }},Copy the code