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

最新推荐文章于 2025-01-09 21:33:16 发布

原创最新推荐文章于 2025-01-09 21:33:16 发布 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍了一种使用Element UI的ElTable组件实现表格行展开功能的方法，通过自定义模板和事件处理，展示了如何在Vue.js项目中动态显示报警上下限值及更多操作。

部署运行你感兴趣的模型镜像

<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)
	      },
		}
   }