avue-crud 自定义列，自定义搜索，自定义操作

辣炒西红柿

已于 2023-10-30 14:08:59 修改

阅读量1.6k

点赞数

文章标签：前端 avue-crud

于 2023-10-30 11:46:06 首次发布

本文链接：https://blog.csdn.net/qq_39293316/article/details/134115994

版权

基本设置：

option: {
          columnBtn: false,
          refreshBtn: false,
          addBtn: false,
          delBtn: false,
          editBtn: false,
          viewBtn: false,
          searchShowBtn: false,
          height: 'auto',
          maxHeight: 'auto',
          calcHeight: 70,
          searchLabelWidth: 58,
          tip: false,
          searchShow: false,
          searchMenuSpan: 6,
          border: true,
          index: false,
          selection: true,
          dialogClickModal: false,
          menu: true,
          menuWidth: 200,
          column: [
            {
              label: "名称",
              prop: "name",
              width: 150,
            },

            {
              label: "时间",
              prop: "time",
            },
          ],
        },

自定义列，自定义搜索，自定义操作：

<avue-crud :table-loading="loading"
      :option="option"
      :data="tableData"
      ref="crud"
      :page.sync="page"
      @search-change="searchChange"
      @current-change="currentChange"
      @selection-change="selectionChange"
      @size-change="sizeChange"
      @search-reset="searchReset">

        // 列表左上角自定义按钮
       <template slot="menuLeft">
        <el-button size="small" type="primary" @click="clickAdd">新增
        </el-button>
      </template>

        // 列表右上角自定义搜索
       <template slot="menuRight">
        <el-input v-model="input" placeholder="请输入内容"></el-input>
        <el-button size="small" :disabled="disabledAdd" type="primary" @click="searchChange">搜索
        </el-button>
      </template>

       // 自定义列，自定义显示名称
      <template slot="name" slot-scope="{ row }">
        <p>{{ row.enName }}</p>
        <p>{{ row.cnName }}</p>
      </template>

        // 列表操作项，自定义操作
       <template slot="menu" slot-scope="{ row }">
          <el-button type="text" size="small" @click="viewData(row)">查看
          </el-button>
        </template>

      <template slot="empty">
        <override-empty></override-empty>
      </template>
</avue-crud>