kd-aiot-frontend/src/views/material/manage/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <IndexSearch @search="reload" />
<!--      <div style="margin: 5px 0; padding-left: 262px">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          class="ele-btn-icon"
          @click="openEdit()"
        >
          添加
        </el-button>
      </div> -->
      <ele-split-layout
        width="244px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
        <!-- 表格 -->
        <ele-pro-table
          ref="table"
          :columns="columns"
          :datasource="datasource"
          height="calc(100vh - 350px)"
          :need-page="false"
          :toolkit="[]"
          :current.sync="current"
          highlight-current-row
          class="dict-table"
          tool-class="ele-toolbar-actions"
          @done="done"
        >
          <!-- 表头工具栏 -->
          <template v-slot:toolbar> </template>
        </ele-pro-table>

        <template v-slot:content>
          <!-- 物料列表 -->
          <IndexData ref="listData" v-if="current" :current-id="current.id" :data="current"/>
        </template>
      </ele-split-layout>
    </el-card>
  </div>
</template>

<script>
  import IndexData from './components/index-data.vue';
  import IndexSearch from './components/index-search.vue';
  import { listDictionaries, removeDictionary } from '@/api/system/dictionary';
  import { getGroupPage } from '@/api/material/list';
  export default {
    name: 'SystemDictionary',
    components: { IndexData , IndexSearch },
    data() {
      return {
        // 表格列配置
        columns: [
          {
            columnKey: 'index',
            type: 'index',
            width: 45,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'name',
            label: '物料组名称',
            showOverflowTooltip: true
          }
        ],
        // 当前编辑数据
        current: null,
        // 是否显示编辑弹窗
        showEdit: false,
        // 编辑回显数据
        editData: null
      };
    },

    created() {
    },

    methods: {
      /* 表格数据源 */
      datasource() {
        return getGroupPage({pageNum:1,size:-1});
      },
      /* 表格渲染完成回调 */
      done(res) {
        if (res.data?.length) {
          this.$refs.table.setCurrentRow(res.data[0]);
        }
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload();
        this.$refs.listData.reload(where);
      },

    }
  };
</script>

<style lang="scss" scoped>
  .dict-table {
    :deep(.el-table__row) {
      cursor: pointer;
    }

    :deep(.el-table__row > td:last-child:after) {
      content: '\e6e0';
      font-family: element-icons !important;
      font-style: normal;
      font-variant: normal;
      text-transform: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      line-height: 1;
      position: absolute;
      right: 10px;
      top: 50%;
      margin-top: -7px;
    }

    :deep(.el-table__row > td:last-child .cell) {
      padding-right: 20px;
    }
  }
</style>