项目场景:
项目中有时候需要使用element中el-table设置type="expand"展开行,但是需要隐藏小箭头,点击某个地方展开行,如下所示:
实现方法:
使用 type="expand"
可以开启展开行功能,使用 width="1"
可以隐藏展开行的小箭头。
<el-table-column
type="expand"
width="1">
<template slot-scope="scope">
<el-input
type="textarea"
:rows="10"
v-model="scope.row.policyDoc">
</el-input>
</template>
</el-table-column>
但是发现没有完全隐藏小箭头,如下所示:
解决方法是,修改为 width="5"
便可。
仍有点小瑕疵。请网友提供更好的解决办法。
附加功能:列表单选、点击名称展开行:
<el-table
:data="tableData"
ref="tableObj"
:stripe="true"
@row-click = "showRow">
<el-table-column
type="expand"
width="5">
<template slot-scope="scope">
<el-input
type="textarea"
:rows="10"
v-model="scope.row.policyDoc">
</el-input>
</template>
</el-table-column>
<!-- 单选 -->
<el-table-column
width="40">
<template slot-scope="scope">
<el-radio class="radio" :label="scope.row" v-model="radio" @change.native="getCurrentRow(scope.row)" > </el-radio>
</template>
</el-table-column>
<el-table-column
prop="name"
label="名称"
show-overflow-tooltip>
<template slot-scope="scope">
<el-button @click="toogleExpand(scope.row)" type="text">{{scope.row.name}}</el-button>
</template>
</el-table-column>
</el-table>
radio: '',
policyData: {},
//row-click 当某一行被点击时会触发该事件 row, event, column(可不用)
showRow(row) {
//赋值给radio
console.log(row);
},
//获取选中行的数据
getCurrentRow(val) {
this.policyData = val;
},
//点击可展开项
toogleExpand(row) {
let table = this.$refs.tableObj;
table.toggleRowExpansion(row);
},