avue.js表格添加行内操作按钮

Updated on in 程序人生 with 0 views and 0 comments

1.标签设置

添加标签template,slot-scope设置为scope,slot设置为menu

内部就可以添加按钮和自己想要的属性了

<avue-crud
      ref="thresholdSetTable"
      :data="pageData"
      :option="option"
      :page.sync="page"
      @selection-change="selectionChange"
      @size-change="sizeChange"
      @current-change="currentChange"
      @search-change="searchChange"
      @search-reset="searchReset"
    >
      <template slot="search">
        <el-form-item label="指标名称">
          <el-input v-model="searchForm.indexName" placeholder="请输入指标名称" size="small" />
        </el-form-item>
      </template>
      <template slot="menuLeft">
        <el-button type="warning" icon="el-icon-plus" size="small" @click=" deleteIndex()">删除</el-button>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button icon="el-icon-check" size="small" @click="showEditThresholdModel(scope.row)">编辑阈值</el-button>
      </template>
    </avue-crud>

2.属性说明

slot-scope属性的值设置为scope,我们点击要过去当前行作为参数传递,则使用scope.row就可以拿到当前行作为参数传递给方法

3.结果展示

image.png


标题:avue.js表格添加行内操作按钮
作者:wenyl
地址:http://www.wenyoulong.com/articles/2020/06/08/1591583065533.html