1.表单模板
<el-form ref="ruleForm" :model="ruleForm" label-width="150px" style="background: #fff; padding: 20px 20px 0 20px;font-weight:400;" :rules="ruleFormRules" class="specialDeal">
<el-row>
<el-col :span="8">
<el-form-item label="任务标题:" prop="taskId">
<!-- 选择下拉框 -->
<el-select v-model="ruleForm.taskId" style="width: 100%" placeholder="" >
<el-option v-for="item in taskIdList" :key="item.value" :label="item.name" :value="item.value"> </el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="项目单位:">
<!-- 树形选择 -->
<el-popover placement="bottom-start" trigger="click">
<el-input slot="reference" v-model="ruleForm.officeName" clearable @change="changeOfficeName"></el-input>
<el-tree class="filter-tree" :data="treeData" :props="defaultProps" ref="popoverTree" :highlight-current="true" @node-click="officeIdHandleNodeClick">
</el-tree>
</el-popover>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="得分:" prop="reviewNumber">
<!-- 输入框-->
<el-input v-model="ruleForm.reviewNumber">
<span slot="suffix" style="margin-right: 20px">以上</span>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8" style="text-align: right">
<el-form-item>
<el-button size="small" type="primary" @click="clickQuery">查询</el-button>
<el-button size="small" @click="clickReset">重置</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
var expectedGrossMargin = (rule, value, callback) => {
console.log("value", value);
if (value === "" || value == null) {
callback(new Error("请输入"));
} else if (!/^([1-9]\d?|100)$/.test(value)) {
callback(new Error("请输入1到100的整数"));
} else {
callback();
}
};
var scoreNumber = (rule, value, callback) => {
console.log("value", value);
if (value === "" || value == null) {
callback();
} else if (!/(^(\d|[1-9]\d)(\.\d{1})?$)|(^100$)/.test(value)) {
callback(new Error("请输入100以内的数字,可保留1位小数"));
} else {
callback();
}
};
return {
ruleForm: {
officeName: "",
secCode: "",
},
ruleFormRules: {
reviewNumber: [{ validator: scoreNumber, required: false, trigger: "blur" },]
},
}
clickQuery() {
this.pageNum = 1;
this.projectSelectionQuery();
},
clickReset() {
this.$refs.ruleForm.resetFields();
this.ruleForm = {
taskId: "",
officeId: "",
officeName: "",
secCode: "",
};
this.clickQuery();
},
projectSelectionQuery(){},
2.表格模板
2.1多选
<el-table :data="tableData" height="500" style="width: 100%" :header-cell-style="{ background: 'rgb(242, 242, 242)' }" center border highlight-current-row @select="tableDataSelect" @select-all="tableDataSelectAll" @sort-change="changeSort">
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
<el-table-column label="序号" width="50px" align="center">
<!-- 此操作时将序号进行连接-->
<template slot-scope="scope">
{{( pageNum -1 )* pageSize +scope.$index +1}}
</template>
</el-table-column>
<el-table-column prop="name" label="项目名称" :show-overflow-tooltip="true" align="letf" width="480">
<template slot-scope="scope">
<div style="color:#409EFF;cursor:pointer;white-space: nowrap;text-overflow: ellipsis;display:inline-block;margin-right:8px;" >{{scope.row.name}}</div>
</template>
</el-table-column>
<el-table-column prop="riskName" label="风险名称" :show-overflow-tooltip="true" align="center">
<template slot-scope="scope">
<div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" >{{scope.row.riskName}}</div>
</template>
</el-table-column>
<el-table-column prop="secName" label="二级单位" :show-overflow-tooltip="true" sortable="custom" align="center"> </el-table-column>
<!-- 将表头列表进行循环,prop为表头对应的英文字段,label为表头展示的中文字段-->
<el-table-column v-for="item in tableCol" :key="item.id" :prop="item.id" :label="item.name" :show-overflow-tooltip="true" align="center" >
<template slot-scope="scope">
<!--scope.row为当前行的数据,找到 与prop匹配的值进行展示-->
<span style="cursor:pointer;color:#409EFF;" @click="postScore(scope.row)">{{scope.row.postScoreMap?scope.row.postScoreMap[item.id]:""}}</span>
</template>
</el-table-column>
</el-table>
<div class="pageNameClass">
<el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total" style="margin-right: 10px" :page-size="pageSize" :current-page="pageNum" @size-change="handleSizeChange" @current-change="handleCurrentChange">
</el-pagination>
</div>
tableData: [
{name:"",secName:"",postScoreMap:{"1111111":"张三"},}
],
tableCol:[
{id:"1111111",name:"姓名"},
],
pageNum: 1,
pageSize: 10,
total: 0,
selectList: [],
tableDataSelect(e) {
console.log("选择表格", e);
this.selectList = e;
},
tableDataSelectAll(e) {
console.log("全选表格", e);
this.selectList = e;
},
handleCurrentChange(val) {
this.pageNum = val;
this.projectSelectionQuery();
},
handleSizeChange(val) {
this.pageSize = val;
this.pageNum = 1;
this.projectSelectionQuery();
},
changeSort(val) {
console.log("val.column.property", val.column.property, val.order);
if (val.column.property == "secName") {
this.ruleForm.orderField = "secSort";
} else {
this.ruleForm.orderField = val.column.property;
}
if (val.order == "ascending") {
this.ruleForm.orderType = "ASC";
} else if (val.order == "descending") {
this.ruleForm.orderType = "DESC";
} else {
delete this.ruleForm.orderType;
delete this.ruleForm.orderField;
}
this.projectSelectionQuery();
},
2.2单选
<el-table-column label="" width="40">
<template slot-scope="scope">
<el-radio :label="scope.$index" v-model="currentRow" @change.native="getCurrentRow(scope.row)" style="color: transparent; "> {{""}}</el-radio>
</template>
</el-table-column>
radioData:{},
currentRow:"",
getCurrentRow(val) {
this.radioData = val;
console.log("vvvvvvvv",this.radioData)
},