mec-cloud_-intelligent-manufacturing_client/zkqy-ui/src/views/amichi/materiel/components/operateTable.vue

<template>
  <div style="width: 100%;">
    <selsetHeader :options="optionsValue" @change="cascaderChangeFun"></selsetHeader>
    <el-table class="sysDictInfoTable" :data="data" style="width: 100%;margin-top: 20px" row-key="id" lazy
      ref="tableTree" v-loading="loading" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column :prop="options[0].value" :label="options[0].label"
        align="center" width="180">
      </el-table-column>
      <el-table-column v-for="(item, index) in optionsData" :key="index" :prop="item.value" :label="item.label"
        align="center">
      </el-table-column>
      <el-table-column label="操作"  align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-dropdown @command="(command) => { handleCommand(command, scope.row) }">
            <el-button type="warning">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-circle-plus-outline" command="handleAdd">新增</el-dropdown-item>
              <el-dropdown-item icon="el-icon-edit" command="handleUpdate">修改</el-dropdown-item>
              <el-dropdown-item icon="el-icon-delete" command="handleDelete">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import selsetHeader from './selsetHeader.vue'
export default {
  name: 'operateTable',
  components: { selsetHeader },
  props: {
    options: {
      type: Array,
      default: () => {
        return [];
      },
    },
    data: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      optionsValue: [],
      optionsData: [],
      loading: false
    }
  },
  watch: {
    options() {
      this.setData();
    }
  },
  mounted() {
    this.setData();
  },
  methods: {
    cascaderChangeFun(e) {
      console.log('slect', e)
      // this.loading = true
      this.optionsData = e
      this.$nextTick(() => {
        // 在数据加载完，重新渲染表格
        this.$refs['tableTree'].doLayout();
      });
      // setTimeout(function (){
      //   this.loading = false
      // },200)
    },
    setData() {
      console.log('setData', this.options)
      this.optionsValue = this.options.slice(1, this.options.length - 1)
      // this.optionsData = this.options.slice(1, 6)
      this.loading = false
    }
  }
}
</script>

<style scoped lang='scss'></style>