vue+Iview render 函数几种写法
最近项目中用 vue + Iview 表格组件常用到 render 函数：几种写法1.render: (h, params) => {// return h('span', params.row.employeeEntity.name);return h('span', (params.row.employeeEntity.name ? params.row.emplo...
·
最近项目中用 vue + Iview 表格组件常用到 render 函数：几种写法
1.
render: (h, params) => {
// return h('span', params.row.employeeEntity.name);
return h('span', (params.row.employeeEntity.name ? params.row.employeeEntity.name : '') + ' ' + (params.row.employeeEntity.lastName ? params.row.employeeEntity.lastName : ''));
},
2.
render(createElement,param){
let str = '';
if (param.row.employeeEntity.companyEntity&¶m.row.employeeEntity.companyEntity.shortName) {
str += param.row.employeeEntity.companyEntity.shortName + '<br>'
}
if (param.row.employeeEntity.companyEntity&¶m.row.employeeEntity.companyEntity.fullName) {
str += param.row.employeeEntity.companyEntity.fullName
}
return createElement(
'span', {
domProps: {
innerHTML: str
},
},
)
}
2_1:操作列的 嵌套 （有iview 组件）
{
title: '操作',
key: 'action',
width: 130,
// align: 'center',
render: (h, params) => {
if (params.row.id != '1') {
return h('div', [
h('Poptip', {
props: {
trigger: 'hover',
title: 'パスワードをリセットすることを確認しますか',
placement: 'left',
confirm: true,
},
on: {
'on-ok': () => {
this.resetPassword(params.row.id);
}
}
},
[
h('Tooltip', {
props: {
trigger: 'hover',
placement: 'bottom',
content: 'リセット',
},
},[
h('Icon', {
props: {
// type: 'ios-lock-outline',
size: '16',
},
class: {
'iconfont icon-mimazhongzhi': true
},
})
])
]),
h('Tooltip', {
props: {
trigger: 'hover',
placement: 'bottom',
content: '更新',
}
}, [
h('Icon', {
props: {
// type: 'ios-create-outline',
// color:'#02428c'
size: '16',
},
class: {
'iconfont icon-bianji4': true
},
on: {
click: () => {
this.$refs['formAccount'].resetFields();
this.modal2 = true;
this.formAccount.id = params.row.id;
this.formAccount.employeeId = params.row.employeeEntity.id;
// this.formAccount.sortType = params.row.employeeEntity.companyEntity.sortType;
this.formAccount.sortType = '1';
this.formAccount.companyId = params.row.employeeEntity.companyEntity.id;
this.companyIdChangeEdit(this.formAccount.companyId);
this.formAccount.branchOfficeId = params.row.employeeEntity.branchOfficeEntity.id;
this.formAccount.name = params.row.employeeEntity.name + params.row.employeeEntity.lastName;
this.formAccount.account = params.row.loginName;
this.formAccount.status = params.row.status;
if (params.row.roles[0].id) {
this.formAccount.roleId = params.row.roles[0].id;
}
}
}
})
]),
]);
} else {
return h('div', [
h('Poptip', {
props: {
trigger: 'hover',
title: 'パスワードをリセットすることを確認しますか',
placement: 'left',
confirm: true,
},
on: {
'on-ok': () => {
this.resetPassword(params.row.id);
}
}
},
[
h('Tooltip', {
props: {
trigger: 'hover',
placement: 'bottom',
content: 'リセット',
},
},[
h('Icon', {
props: {
// type: 'ios-lock-outline',
size: '16',
},
class: {
'iconfont icon-mimazhongzhi': true
},
})
])
]),
]);
}
}
}2_2. h函数 新建两个 兄弟节点
render: (h, params) => {
return h('span',
[h('span',{style:{color:'#8f9094 !important'}},'高速料金 '),
h('span',{style:{color:'#000 !important'}},params.row.toll == null ?' ':Vue.FormatMoney(params.row.toll))]
);
}
3.
这个 是表格 内套表格 的复杂列 可展开表格
tableExpand 是 自己写的一个组件
通过给 columns 数据设置一项，指定 type: 'expand'，即可开启扩展功能。
给行数据 data 的某项设置 _expanded 为 true，可以默认展开当前行，设置 _disableExpand 可以禁用当前行的展开功能。
渲染展开区域与自定义列模板方法类似，使用 render 函数。当内容较复杂时，可拆分为组件或使用 JSX。
{
type: 'expand',
width: 30,
render: (h, params) => {
if (params.row.transportType == '0') {
return h(tableExpandSpot, {
props: {
id: params.row.id,
// row: params.row.orderTravelledList,
// extorder: params.row.extorder,
status:params.row.status,
},
on: {
'over-finished': () => {
this.search();
},
'over-saveModalTen': () => {
this.search();
}
}
})
} else {
return h(tableExpand, {
props: {
// row: params.row.orderTravelledList,
id: params.row.id,
status:params.row.status,
// extorder: params.row.extorder,
},
on: {
'over-finished': () => {
this.search();
},
'over-saveModalTen': () => {
this.search();
}
}
})
}
}
},扩展：tableExpand 组件代码
<template>
<div>
<Col span="22" offset="1">
<Table size="small" :columns="columns1" :data="data1" :loading="loading" class="tableExpand">
<template slot-scope="{ row, index }" slot="orderAction">
<span v-if="row.extAkConcurDecideEntityList.length > 0" >
{{row.extAkConcurDecideEntityList[0].extbusiConnectionEntity.shortName}}
({{row.extAkConcurDecideEntityList[0].extbusiConnectionEntity.fullName }})<br>
{{row.extAkConcurDecideEntityList[0].amountToConcur|formatNumber}}円
</span>
</template>
<template slot-scope="{ row, index }" slot="statusAction">
<div style="height: 20px;line-height: 20px;">
<i :style="{ background:row.status.color}" class="statusCircle"></i>
{{row.status.value}}
</div>
</template>
<template slot-scope="{ row, index }" slot="action" v-if="status.name != 'f'">
<div class="operation-btn-all">
<Dropdown v-if="row.extAkConcurDecideEntityList.length > 0">
<Button size="small">
<Icon type="md-settings"></Icon>
<Icon type="ios-arrow-down"></Icon>
</Button>
<DropdownMenu slot="list">
<div @click="cancelSingle(row.extAkConcurDecideEntityList[0].id)" v-if="row.status.name!='e'">
<DropdownItem>キャンセル</DropdownItem>
</div>
<div @click="finished(row.extAkConcurDecideEntityList[0].id)"
v-if="row.toSupplierContactStatus=='1'&&row.toCustomerContactStatus=='1'">
<DropdownItem>配送完了</DropdownItem>
</div>
<Poptip>
<div class="tableExpandSpot-btn" style="margin-right: 4px">配車依頼書</div>
<div slot="content">
<Button style="margin-right: 4px" @click="showCarPdf1(row.id)">配車依頼書プレビュー</Button>
<Button style="margin-right: 4px" @click="modalTenShow(row,'1')">FAX送信する</Button>
</div>
</Poptip>
<Poptip>
<div class="tableExpandSpot-btn" style="margin-right: 4px">車番連絡書</div>
<div slot="content">
<Button style="margin-right: 4px" @click="showCarPdf(row.id)">車番連絡書プレビュー</Button>
<Button style="margin-right: 4px" @click="modalTenShow(row,'2')">FAX送信する</Button>
</div>
</Poptip>
</DropdownMenu>
</Dropdown>
</div>
</template>
</Table>
</Col>
<Modal
:mask-closable=false
v-model="modalTen"
title="FAX送信確認画面">
<p style="text-align: center;margin-top: 20px">下記のFAX番号へ送信してよろしいですか。</p>
<div v-if="formModalTen.type=='1'">
<div v-for="(item,index) in formModalTen.decideEmployeeList" :key="index">
<h2 style="text-align: center;" v-if="formModalTen.faxType=='1'">{{item.extMsBusiConnectionEmployee.fax}}</h2>
<h2 style="text-align: center;" v-if="formModalTen.faxType=='2'">{{item.fax}}</h2>
</div>
</div>
<div v-else>
<div v-for="(item,index) in formModalTen.decideEmployeeList" :key="index">
<h2 style="text-align: center;" v-if="formModalTen.faxType=='1'">{{item.fax}}</h2>
</div>
<h2 style="text-align: center;" v-if="formModalTen.faxType=='2'">
{{fax}}</h2>
</div>
<div slot="footer">
<Button @click="modalTen=false">キャンセル</Button>
<Poptip confirm title="処理を続行していいですか" @on-ok="saveModalTen">
<Button style="margin-left: 8px">FAX送信する</Button>
</Poptip>
</div>
</Modal>
<Modal
:mask-closable=false
v-model="modal"
title="キャンセル">
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="150">
<Row>
<Col span="22">
<FormItem label="キャンセル区分" prop="cancelDistinction">
<Select v-model="formValidate.cancelDistinction" filterable>
<Option :value="item.id" :key="item.id" v-for="item in cancelDistinctionList">{{item.name}}</Option>
</Select>
</FormItem>
<FormItem label="キャンセル理由" prop="cancelReason">
<Input v-model="formValidate.cancelReason" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
:maxlength="200"/>
</FormItem>
</Col>
</Row>
</Form>
<div slot="footer">
<Button @click="cancel('formValidate')">閉じる</Button>
<Poptip confirm title="処理を続行していいですか" @on-ok="cancelSubmit('formValidate')">
<Button type="primary" style="margin-left: 8px">保存</Button>
</Poptip>
</div>
</Modal>
</div>
</template>
<script>
import {SERVER_URL} from "../config/config";
window._this = {};
export default {
props: ['row','id','status'],
data() {
return {
orderNum: '',
loading: true,
data1: [],
columns1: [
{
title: ' ',
width: 150,
},
{
title: '運行No.',
minWidth: 100,
maxWidth: 120,
// split: true,
render: (h, params) => {
return h('span', params.row.travelledNo);
}
},
{
title: 'ステータス',
width: 150,
slot: 'statusAction'
},
{
title: '受注協力先',
minWidth: 200,
slot: 'orderAction'
},
{
title: '配車依頼書発行',
minWidth: 100,
maxWidth: 120,
render:function (createElement, params) {
let str = '';
if (params.row.toSupplierContactStatus == '0') {
str = '<span style="color: red;">未発行</span>'
}
else {
str = '<span style="color: #333;">発行済み</span>'
}
return createElement(
'span', {
domProps: {
innerHTML: str
},
},
)
}
},
{
title: '車番連絡書発行',
minWidth: 100,
maxWidth: 120,
render:function (createElement, params) {
let str = '';
if (params.row.toCustomerContactStatus == '0') {
str = '<span style="color: red;">未発行</span>'
}
else {
str = '<span style="color: #333;">発行済み</span>'
}
return createElement(
'span', {
domProps: {
innerHTML: str
},
},
)
}
},
{
title: '積日',
key: 'startDate',
minWidth: 100,
maxWidth: 120,
render: (h, params) => {
let year = new Date().getFullYear();
let startDateYear = new Date(params.row.startDate).getFullYear();
let startDate = (year == startDateYear ? new Date(params.row.startDate).Format('MM/dd') : new Date(params.row.startDate).Format('yyyy/MM/dd'));
return h('span', startDate);
}
},
{
title: '卸日',
key: 'endDate',
minWidth: 100,
maxWidth: 120,
render: (h, params) => {
let year = new Date().getFullYear();
let endDateYear = new Date(params.row.endDate).getFullYear();
let endDate = (year == endDateYear ? new Date(params.row.endDate).Format('MM/dd') : new Date(params.row.endDate).Format('yyyy/MM/dd'));
return h('span', endDate);
}
},
{
title: 'ドライバ',
minWidth: 100,
maxWidth: 130,
render: (h, params) => {
let str = '';
params.row.extAkConcurDecideEntityList.forEach(concurDecideEntityList=>{
concurDecideEntityList.extConcurDecideDriverEntity.forEach(concurDecide=>{
str += concurDecide.driverName
})
})
return h('span',str)
}
},
{
title: 'ナンバー',
minWidth: 100,
maxWidth: 120,
render: (h, params) => {
let str = '';
params.row.extAkConcurDecideEntityList.forEach(concurDecideEntityList => {
concurDecideEntityList.extConcurDecideDriverEntity.forEach(concurDecide => {
str += concurDecide.truckNum
})
})
return h('span', str)
}
},
{
title: '車種',
minWidth:100,
maxWidth: 130,
render: (h, params) => {
let str = '';
params.row.extAkConcurDecideEntityList.forEach(concurDecideEntityList => {
concurDecideEntityList.extConcurDecideDriverEntity.forEach(concurDecide => {
str += concurDecide.vehicleTypeNameList
})
})
return h('span', str)
}
},
{
title: '操作',
minWidth:100,
maxWidth: 150,
slot: 'action',
},
],
modal: false,
formValidate: {
id:'',
cancelDistinction: '',
cancelReason: ''
},
ruleValidate: {
cancelReason: [{required: true, message: '空白で入力できません。', trigger: 'blur'}],
cancelDistinction: [{required: true, message: '空白で入力できません。', trigger: 'change'}],
},
cancelDistinctionList: [],
modalTen: false,
fax: '',
formModalTen: {
id: '',
type: '',
faxType: '',
decideEmployeeList: []
},
}
},
methods: {
saveModalTen() {
if (this.formModalTen.type == '1') {
let param = {
travelledId: this.formModalTen.id
}
this.$ajax.post('/akOrderTravelled/vehicleForfaxSend', param).then(response => {
if (response.result) {
this.$Message.success(response.successCode.key);
this.modalTen = false;
// this.$emit('over-saveModalTen')
this.search();
} else {
this.$Message.error(response.errorCode.key);
}
});
}else {
let travelledIdList = [];
travelledIdList.push(this.formModalTen.id)
let param = {
travelledIdList: travelledIdList
}
this.$ajax.post('/akOrderTravelled/truckNumForfaxSend', param).then(response => {
if (response.result) {
this.$Message.success(response.successCode.key);
this.modalTen = false;
// this.$emit('over-saveModalTen')
this.search();
} else {
this.$Message.error(response.errorCode.key);
}
});
}
},
showCarPdf1(id) {
window.open(encodeURI(SERVER_URL + "/templates/searchRequestTruckNoTod?travelledId=" + id + "&Authorization=Bearer " + localStorage.getItem("TOKEN")));
},
showCarPdf(id) {
let travelledIdList = [];
travelledIdList.push(id)
window.open(encodeURI(SERVER_URL + "/templates/searchTruckNoTob?travelledIdList=" + JSON.stringify(travelledIdList) + "&Authorization=Bearer " + localStorage.getItem("TOKEN")));
},
modalTenShow(row,type) {
this.formModalTen.type = type;
this.formModalTen.decideEmployeeList = [];
if (type == '1') {
if(row.extAkConcurDecideEntityList[0].extAkConcurDecideEmployee){
let flag = false;
for (let i = 0; i < row.extAkConcurDecideEntityList[0].extAkConcurDecideEmployee.length; i++) {
if (row.extAkConcurDecideEntityList[0].extAkConcurDecideEmployee[i].extMsBusiConnectionEmployee.fax) {
flag = true;
break;
}
}
if(flag){
this.formModalTen.faxType = '1'
this.formModalTen.decideEmployeeList = row.extAkConcurDecideEntityList[0].extAkConcurDecideEmployee;
}else {
if(row.extAkConcurDecideEntityList[0].extbusiConnectionEntity&&row.extAkConcurDecideEntityList[0].extbusiConnectionEntity.fax){
this.formModalTen.faxType = '2';
this.formModalTen.decideEmployeeList.push(row.extAkConcurDecideEntityList[0].extbusiConnectionEntity)
}else {
this.$Message.error('担当も会社もFAXを持っていません');
return;
}
}
}
} else {
if (row.vehicleEntity.extorder.customerEmployeeList) {
if (row.vehicleEntity.extorder.customerEmployeeList) {
let typeFlag = false;
for (let i = 0; i < row.vehicleEntity.extorder.customerEmployeeList.length; i++) {
if (row.vehicleEntity.extorder.customerEmployeeList[i].fax) {
typeFlag = true;
break;
}
}
if(typeFlag){
this.formModalTen.faxType = '1'
this.formModalTen.decideEmployeeList = row.vehicleEntity.extorder.customerEmployeeList
}else {
if (row.vehicleEntity.extorder.extbusiConnectionEntity && row.vehicleEntity.extorder.extbusiConnectionEntity.fax) {
this.formModalTen.faxType = '2'
this.fax = row.vehicleEntity.extorder.extbusiConnectionEntity.fax
} else {
this.$Message.error('担当も会社もFAXを持っていません');
return;
}
}
}
}
}
this.formModalTen.id = row.id;
this.modalTen = true;
},
finished(id) {
let param = {
concurDecideList: [
{
id: id
}
]
}
this.$ajax.post('/akOrderTravelled/finished', param).then(response => {
if (response.result) {
this.$Message.success(response.successCode.key);
// this.$emit('over-finished')
this.search();
} else {
this.$Message.error(response.errorCode.key);
}
})
},
cancelSingle(id) {
this.modal = true;
this.$refs['formValidate'].resetFields();
this.formValidate.id = id;
},
cancelSubmit(name) {
this.$refs[name].validate((valid) => {
if (valid) {
let param = {
concurDecideList: [
{
id: this.formValidate.id,
concurCancelReason: this.formValidate.cancelReason,
concurCancelKbn: this.formValidate.cancelDistinction
}
]
}
this.$ajax.post('/akOrder/singleCancel', param).then(response => {
if (response.result) {
this.$Message.success(response.successCode.key);
// this.$emit('over-finished')
this.search();
this.modal = false;
} else {
this.$Message.error(response.errorCode.key);
}
})
}
})
},
cancel () {
this.modal = false;
},
search(){
this.$ajax.get('/akOrder/searchTravelledByVehicleId?orderVehicleId=' + this.id).then(response => {
if (response.result) {
this.data1 = response.data;
this.loading = false;
} else {
this.$Message.error(response.errorCode);
}
});
}
},
created: function () {
_this = this;
// this.data1 = this.row;
this.$ajax.get('/basicData/findAll?type=TT').then(response => {
if (response.result) {
this.cancelDistinctionList = response.data;
}
});
this.search();
}
}
</script>
<style>
.statusCircle{
display: inline-block;
width: 7px;
height: 7px;
border-radius: 30px;
/*vertical-align: middle;*/
}
.tableExpandSpot-btn {
padding: 0 16px 0 16px;
cursor: pointer;
width: 100%;
height: 31px;
line-height: 31px;
}
.tableExpandSpot-btn:hover {
background: #f3f3f3;
}
</style>
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献3条内容
所有评论(0)