create table t_cang_ku ( id varchar(36) primary key comment 'ID', name varchar(255) not null comment '仓库名称' ) comment '仓库表';根据这张表生成一个前端界面，使用表格，用element-ui和vue2

好的，以下是使用 element-ui 和 vue2 生成的前端界面代码示例：

<template>
  <div>
    <el-button type="primary" @click="addCangKu">新增仓库</el-button>
    <el-table :data="cangKuList" style="width: 100%">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="仓库名称"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="editCangKu(scope.row)">编辑</el-button>
          <el-button type="text" @click="deleteCangKu(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
      <el-form :model="cangKuForm" ref="cangKuForm" :rules="cangKuFormRules" label-width="80px">
        <el-form-item label="ID" prop="id">
          <el-input v-model="cangKuForm.id" :disabled="isEdit"></el-input>
        </el-form-item>
        <el-form-item label="仓库名称" prop="name">
          <el-input v-model="cangKuForm.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveCangKu">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cangKuList: [], // 仓库列表
      dialogTitle: '', // 对话框标题
      dialogVisible: false, // 对话框是否可见
      cangKuForm: { // 仓库表单
        id: '',
        name: ''
      },
      cangKuFormRules: { // 仓库表单验证规则
        id: [
          { required: true, message: '请输入ID', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入仓库名称', trigger: 'blur' }
        ]
      },
      isEdit: false // 是否为编辑模式
    }
  },
  mounted() {
    this.getCangKuList()
  },
  methods: {
    // 获取仓库列表
    getCangKuList() {
      // TODO: 发送请求获取后端数据
      this.cangKuList = [
        { id: '1', name: '仓库1' },
        { id: '2', name: '仓库2' }
      ]
    },
    // 新增仓库
    addCangKu() {
      this.dialogTitle = '新增仓库'
      this.cangKuForm.id = ''
      this.cangKuForm.name = ''
      this.isEdit = false
      this.dialogVisible = true
    },
    // 编辑仓库
    editCangKu(row) {
      this.dialogTitle = '编辑仓库'
      this.cangKuForm.id = row.id
      this.cangKuForm.name = row.name
      this.isEdit = true
      this.dialogVisible = true
    },
    // 删除仓库
    deleteCangKu(row) {
      // TODO: 发送请求删除后端数据
      this.$message.success('删除成功')
      this.getCangKuList()
    },
    // 保存仓库
    saveCangKu() {
      this.$refs.cangKuForm.validate((valid) => {
        if (valid) {
          // TODO: 发送请求保存后端数据
          this.$message.success('保存成功')
          this.dialogVisible = false
          this.getCangKuList()
        }
      })
    }
  }
}
</script>

以上代码使用了 element-ui 的 el-table 表格组件、el-dialog 对话框组件和 el-form 表单组件来实现仓库列表的展示、新增、编辑、删除等操作。其中 el-table-column 表格列组件用来定义表格列的属性和内容，el-button 按钮组件用来触发相关操作。通过发送请求来操作后端数据，这部分代码需要根据实际情况进行编写。