equipment/src/views/ysjl/3000/dj/common/table.vue

<template>
  <div class="app-container">
    <div class="searchBox">
      <el-button type="primary" @click="addtable">
        新增
      </el-button>
      <el-button type="danger" @click="deleteFn">
        删除
      </el-button>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        v-for="(item, index) in tabelHeader"
        :key="index"
        :prop="item.prop"
        :label="item.label"
      >
        <template v-if="item.type==1" slot-scope="scope">
          <el-autocomplete
            v-model="scope.row[scope.column.property]"
            class="inline-input"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          />
        </template>
        <el-table-column v-for="(k, i) in item.child" :key="i" :label="k.label" :prop="k.prop">
          <template slot-scope="scope">
            <el-autocomplete
              v-model="scope.row[scope.column.property]"
              class="inline-input"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            />
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'Table',
  components: { },
  props: {
    tabelHeader: {
      type: Array,
      require: true,
      default: () => {
        return []
      }
    },
    fromType: {
      type: String,
      default: ''
    },
    tableData: {
      type: Array,
      require: true,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      options: [
        {
          value: '√',
          id: '1'
        },
        {
          value: 'X',
          id: '2'
        },
        {
          value: '/',
          id: '3'
        }
      ],
      multipleSelection: []
    }
  },
  computed: {},
  created() {},
  methods: {
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    querySearch(queryString, cb) {
      var restaurants = this.options
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },

    handleSelect(item) {
      console.log(item)
    },
    addtable() {
      this.$emit('addfn')
    },
    deleteFn() {
      if (this.multipleSelection.length === 0) {
        this.$alert('请先选择要删除的数据', '提示', {
          confirmButtonText: '确定'
        })
      } else {
        this.multipleSelection.forEach((val, index) => {
          console.log(val)
          // 遍历源数据
          this.tableData.forEach((v, i) => {
            console.log(v)
            // 如果选中数据和源数据的某一条唯一标识符相等，删除对应的源数据
            if (val.id === v.id) {
              this.tableData.splice(i, 1)
            }
          })
        })
      }
    }
  }
}
</script>

<style scoped>
.searchBox{
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
}
</style>