element table 展开行 通过自定义按钮

<el-table ref="expandstable" :data="channelList"  :expand-row-keys="expands" :row-key="getRowKeys">
           <el-table-column type="expand">
              <template slot-scope="props">
                <el-row>
                  <el-col :span="12">
                    <p><span class="text-f94d7d">报警上限值:</span>{{ props.row.abnomalValueMax }}</p>
                  </el-col>
                  <el-col :span="12">
                   <p><span class="text-f94d7d"> 报警下限值:</span>{{ props.row.abnomalValueMin }}</p>
                  </el-col>
                
                </el-row>
              </template>
            </el-table-column>
            <el-table-column label="序号" type="index" width="50" />
            <el-table-column label="通道名称" align="center" prop="name" />
          
            <el-table-column label="操作" align="center" prop="unit" width="200">
              <template slot-scope="scope">
          
                <el-button
                  size="medium"
                  type="text"
                   class="fs-16"
                  @click="expandsHandle(scope.row)"
                >更多<i class="el-icon-arrow-down el-icon--right fs-20"></i></el-button>
              </template>
            </el-table-column>
          </el-table>

export default{
    name:'channelTemplate',
    data(){
      return{
		//设置row-key只展示一行
        expands: [],//只展开一行放入当前行id
        getRowKeys: (row) => {//获取当前行id
          // console.log(row)
          return row.id   //这里看这一行中需要根据哪个属性值是id
        }
}
      },
        methods:{
        	 /*点击更多展开table*/
	      expandsHandle(row){
	        this.$refs.expandstable.toggleRowExpansion(row)
	      },
		}
   }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值