vue改造四级树状可输入table
<template>
<div class="dimension_wary">
<div class="itemHeader">
<div class="target"></div>
<div class="sort">X2</div>
<div class="weight">X3</div>
<div class="rule">X4</div>
</div>
<el-tree
:data="tableDatas"
:props="defaultProps"
:default-expand-all="true"
:expand-on-click-node="false"
empty-text="暂无数据"
icon-class="tree_icon"
:indent="0">
<div slot-scope="{ node, data }" style="width: 100%">
<div class="thirdContentContainer">
<div class="target" :style="{paddingLeft: ((data.indexType - 1) * 16) + 'px'}">
<span class="tree_label" >
<span @click="handleIconTree(node)" style="padding: 4px 0 0 2px;"><d2-icon-svg v-if="data.selfAssessIndexVOList && data.selfAssessIndexVOList.length != 0" :name="node.expanded ? 'icon_gather' : 'icon_expend'" class="tree_svg" /></span>
{{ data.riskType }}
</span>
<span class="target_text">
<el-tooltip effect="dark" v-if="drawerType =='view' || !dataUpper" :content="data.indexName" :visible-arrow="false" placement="top-start">
<el-input ref="indexName" size="medium" :disabled="true" v-model="data.indexName" clearable :style="inputWidth(data.indexType * 16)" />
</el-tooltip>
<el-input v-else placeholder="请输入" ref="indexName" size="medium" :disabled="drawerType =='view' || !dataUpper" v-model="data.indexName" v-limitTextLen="512" clearable :style="inputWidth(data.indexType * 16)" />
</span>
</div>
<div class="sort">
<el-select v-show="data.indexType && data.indexType == '4'" :disabled="drawerType =='view' || !dataUpper" v-model="data.indexClassify" filterable placeholder="请选择" style="width:95%;">
<el-option
v-for="item in dictsAll.indexClassify"
:key="item.key"
:label="item.value"
:value="item.key">
</el-option>
</el-select>
</div>
<div class="weight">
<el-input placeholder="请输入" size="medium" :disabled="drawerType =='view' || !dataUpper" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})%?).*$/g, '$1')" v-model="data.indexWeight" class="weight_input" clearable style="width: 90%;" />
</div>
<div class="rule">
<div class="rule_text" :class="data.indexType == '4' ? 'rule_textTow' : 'rule_textOne'" style="width: 97%;">
<div v-show="data.indexType && data.indexType == '4'" style="width: 93%;">
<el-tooltip effect="dark" v-if="drawerType =='view' || !dataUpper" :content="data.indexStandard" :visible-arrow="false" placement="top-start">
<el-input :disabled="true" placeholder="请输入" size="medium" v-model="data.indexStandard" clearable style="width: 93%;" />
</el-tooltip>
<el-input v-else :disabled="drawerType =='view' || !dataUpper" placeholder="请输入" size="medium" v-limitTextLen="512" v-model="data.indexStandard" clearable style="width: 93%;" />
</div>
<el-popover v-if="drawerType !='view'" placement="bottom-end" width="80" popper-class='popperClass' trigger="hover">
<div class="popover" v-show="dataUpper">
<div class="popover_div" @click="handleSam(data, node)">添加同级</div>
<div class="popover_div" @click="handleSubordinate(data, node)" v-if="data.indexType != 4">添加下级</div>
<div class="popover_div" @click="handleDelect(data, node)">删除本级</div>
</div>
<el-button slot="reference" type="text" size="suspension"><d2-icon-svg name="icon_increase" class="icon_name_svg" style="margin-right: 0px;" /></el-button>
</el-popover>
</div>
</div>
</div>
</div>
</el-tree>
</div>
</template>
//script
handleIconTree(valOne) {
if (valOne.expanded == true) {
valOne.expanded = false
} else {
valOne.expanded = true
}
},
inputWidth(val) {
let w = '90%'
let k = val +'px'
if (val == 64) {
k = '40px'
}
return {width: `calc(${w} - ${k})`}
},
