89 lines
2.0 KiB
Vue
89 lines
2.0 KiB
Vue
<template>
|
|
<el-table-column class="table-form-col" :align="align" :width="width" >
|
|
<template #header>
|
|
<span :class="required ? 'required-label' : ''">{{label}}</span>
|
|
<el-tooltip v-if="!isEmpty(tips)" :content="tips" placement="top">
|
|
<i class="el-icon-question" style="cursor: pointer;"/>
|
|
</el-tooltip>
|
|
</template>
|
|
<template scope="d">
|
|
<form-col table label-width="0" :prop="colProp(d.$index)" :rules="rules">
|
|
<el-popover
|
|
v-if="showOverflowTooltip"
|
|
placement="top"
|
|
width="250"
|
|
trigger="hover">
|
|
<slot name="content-tip" :row="d.row" :index="d.$index"/>
|
|
<template #reference>
|
|
<slot :row="d.row" :index="d.$index"/>
|
|
</template>
|
|
</el-popover>
|
|
|
|
<slot v-else :row="d.row" :index="d.$index"/>
|
|
</form-col>
|
|
</template>
|
|
</el-table-column>
|
|
</template>
|
|
|
|
<script>
|
|
import FormCol from '@/components/FormCol/index.vue'
|
|
import HoverShow from '@/components/HoverShow/index.vue'
|
|
import { isEmpty } from '@/utils'
|
|
|
|
export default {
|
|
name: "TableFormCol",
|
|
components: { HoverShow, FormCol },
|
|
props: {
|
|
align: {
|
|
type: String,
|
|
default: "center"
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
required: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
propPrefix: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
prop: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
rules: {
|
|
type: Array,
|
|
default: () => ([])
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
showOverflowTooltip: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
tips: {
|
|
type: String,
|
|
default: null,
|
|
}
|
|
},
|
|
computed: {
|
|
colProp() {
|
|
return (index) => {
|
|
if (isEmpty(this.propPrefix) || isEmpty(this.prop)) {
|
|
return null;
|
|
}
|
|
return `${this.propPrefix}[${index}].${this.prop}`;
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
isEmpty,
|
|
}
|
|
}
|
|
</script>
|