diff --git a/src/components/TableCell/index.js b/src/components/TableCell/index.js
new file mode 100644
index 0000000..d438813
--- /dev/null
+++ b/src/components/TableCell/index.js
@@ -0,0 +1,8 @@
+import TableCellReadComp from './tableCellRead'
+
+const TableCellRead = {
+  install: function(Vue) {
+    Vue.component('TableCellRead', TableCellReadComp)
+  }
+}
+export default TableCellRead

diff --git a/src/components/TableCell/index.js b/src/components/TableCell/index.js
new file mode 100644
index 0000000..d438813
--- /dev/null
+++ b/src/components/TableCell/index.js
@@ -0,0 +1,8 @@
+import TableCellReadComp from './tableCellRead'
+
+const TableCellRead = {
+  install: function(Vue) {
+    Vue.component('TableCellRead', TableCellReadComp)
+  }
+}
+export default TableCellRead
diff --git a/src/components/TableCell/tableCellRead.vue b/src/components/TableCell/tableCellRead.vue
new file mode 100644
index 0000000..8c00a1a
--- /dev/null
+++ b/src/components/TableCell/tableCellRead.vue
@@ -0,0 +1,40 @@
+<!--只读表格项-->
+<template>
+  <div class="tableCellReadOnly">
+    {{ text }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TableCellRead',
+  props: {
+    text: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tableCellReadOnly{
+  -webkit-appearance: none;
+  background-color: #FFFFFF;
+  background-image: none;
+  border-radius: 4px;
+  border: 1px solid #DCDFE6;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: #606266;
+  display: inline-block;
+  font-size: inherit;
+  height: 40px;
+  line-height: 40px;
+  outline: none;
+  padding: 0 15px;
+  /*-webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);*/
+  /*transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);*/
+  width: 100%;
+}
+</style>

diff --git a/src/components/TableCell/index.js b/src/components/TableCell/index.js
new file mode 100644
index 0000000..d438813
--- /dev/null
+++ b/src/components/TableCell/index.js
@@ -0,0 +1,8 @@
+import TableCellReadComp from './tableCellRead'
+
+const TableCellRead = {
+  install: function(Vue) {
+    Vue.component('TableCellRead', TableCellReadComp)
+  }
+}
+export default TableCellRead
diff --git a/src/components/TableCell/tableCellRead.vue b/src/components/TableCell/tableCellRead.vue
new file mode 100644
index 0000000..8c00a1a
--- /dev/null
+++ b/src/components/TableCell/tableCellRead.vue
@@ -0,0 +1,40 @@
+<!--只读表格项-->
+<template>
+  <div class="tableCellReadOnly">
+    {{ text }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TableCellRead',
+  props: {
+    text: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tableCellReadOnly{
+  -webkit-appearance: none;
+  background-color: #FFFFFF;
+  background-image: none;
+  border-radius: 4px;
+  border: 1px solid #DCDFE6;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: #606266;
+  display: inline-block;
+  font-size: inherit;
+  height: 40px;
+  line-height: 40px;
+  outline: none;
+  padding: 0 15px;
+  /*-webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);*/
+  /*transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);*/
+  width: 100%;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 58cfcbc..48b0cb0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -37,6 +37,10 @@
 // 引入Element-ui
 Vue.use(ElementUI, { locale })
 
+// 自定义表格项组件
+import TableCellRead from './components/TableCell'
+Vue.use(TableCellRead)
+
 // 引入高德地图
 // import VueAMap from 'vue-amap'
 // Vue.use(VueAMap)