update

2026-01-21 05:27:57 +08:00 · 2019-05-23 18:44:43 +08:00
parent 8efcd2af50
commit 094e3d55b3
7 changed files with 191 additions and 10 deletions
--- a/docs/index.html
+++ b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vxe-table/favicon.ico><title>vxe-table 表格</title><link href=/vxe-table/static/css/chunk-vendors.27509805.css rel=preload as=style><link href=/vxe-table/static/css/index.5d8d71a8.css rel=preload as=style><link href=/vxe-table/static/js/chunk-vendors.59abef37.js rel=preload as=script><link href=/vxe-table/static/js/index.ec47255c.js rel=preload as=script><link href=/vxe-table/static/css/chunk-vendors.27509805.css rel=stylesheet><link href=/vxe-table/static/css/index.5d8d71a8.css rel=stylesheet></head><body><noscript><strong>We're sorry but vxe-table doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vxe-table/static/js/chunk-vendors.59abef37.js></script><script src=/vxe-table/static/js/index.ec47255c.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vxe-table/favicon.ico><title>vxe-table 表格</title><link href=/vxe-table/static/css/chunk-vendors.27509805.css rel=preload as=style><link href=/vxe-table/static/css/index.5d8d71a8.css rel=preload as=style><link href=/vxe-table/static/js/chunk-vendors.59abef37.js rel=preload as=script><link href=/vxe-table/static/js/index.9affdf58.js rel=preload as=script><link href=/vxe-table/static/css/chunk-vendors.27509805.css rel=stylesheet><link href=/vxe-table/static/css/index.5d8d71a8.css rel=stylesheet></head><body><noscript><strong>We're sorry but vxe-table doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vxe-table/static/js/chunk-vendors.59abef37.js></script><script src=/vxe-table/static/js/index.9affdf58.js></script></body></html>
--- a/docs/static/js/index.9affdf58.js
+++ b/docs/static/js/index.9affdf58.js
--- a/docs/static/js/index.ec47255c.js
+++ b/docs/static/js/index.ec47255c.js
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -415,9 +415,15 @@ export default {
              }
            },
            {
-              lable: '禁用编辑',
+              lable: 'cell 禁用编辑',
              locat: {
-                name: 'TableEditDisable'
+                name: 'TableEditCellDisable'
+              }
+            },
+            {
+              lable: 'row 禁用编辑',
+              locat: {
+                name: 'TableEditRowDisable'
              }
            },
            {
--- a/examples/router.js
+++ b/examples/router.js
@@ -54,7 +54,8 @@ import TableEditInsert from './views/table/edit/Insert.vue'
 import TableEditRemove from './views/table/edit/Remove.vue'
 import TableEditRevert from './views/table/edit/Revert.vue'
 import TableEditStatus from './views/table/edit/Status.vue'
-import TableEditDisable from './views/table/edit/Disable.vue'
+import TableEditCellDisable from './views/table/edit/CellDisable.vue'
+import TableEditRowDisable from './views/table/edit/RowDisable.vue'
 import TableEditKeyboard from './views/table/edit/Keyboard.vue'
 import TableEditValid from './views/table/edit/Valid.vue'
 import TableEditTemplate from './views/table/edit/Template.vue'
@@ -337,9 +338,14 @@ export default new Router({
      component: TableEditStatus
    },
    {
-      path: '/table/edit/disable',
-      name: 'TableEditDisable',
-      component: TableEditDisable
+      path: '/table/edit/cellDisable',
+      name: 'TableEditCellDisable',
+      component: TableEditCellDisable
+    },
+    {
+      path: '/table/edit/rowDisable',
+      name: 'TableEditRowDisable',
+      component: TableEditRowDisable
    },
    {
      path: '/table/edit/keyboard',
--- a/examples/views/table/edit/CellDisable.vue
+++ b/examples/views/table/edit/CellDisable.vue
@@ -22,14 +22,14 @@
      <code class="javascript">{{ demoCodes[1] }}</code>
    </pre>

-    <P>禁用行编辑</P>
+    <P>禁用第二行编辑</P>

    <vxe-table
      ref="xTable"
      border
      show-all-overflow
      :data.sync="tableData"
-      :edit-config="{trigger: 'click', mode: 'row', activeMethod: activeRowMethod}"
+      :edit-config="{trigger: 'click', mode: 'cell', activeMethod: activeRowMethod}"
      @edit-disabled="editDisabledEvent">
      <vxe-table-column type="index" width="60"></vxe-table-column>
      <vxe-table-column prop="name" label="Name" :edit-render="{name: 'input'}"></vxe-table-column>
--- a/examples/views/table/edit/RowDisable.vue
+++ b/examples/views/table/edit/RowDisable.vue
@@ -0,0 +1,169 @@
+<template>
+  <div>
+    <p>设置 edit-config 的 activeMethod 方法判断单元格是否禁用</p>
+
+    <vxe-table
+      ref="xTable"
+      border
+      show-all-overflow
+      :data.sync="tableData"
+      :edit-config="{trigger: 'click', mode: 'row', activeMethod: activeRowMethod}"
+      @edit-disabled="editDisabledEvent">
+      <vxe-table-column type="index" width="60"></vxe-table-column>
+      <vxe-table-column prop="name" label="Name" :edit-render="{name: 'input'}"></vxe-table-column>
+      <vxe-table-column prop="sex" label="Sex" :edit-render="{name: 'input'}"></vxe-table-column>
+      <vxe-table-column prop="date" label="Date" :edit-render="{name: 'input'}"></vxe-table-column>
+    </vxe-table>
+
+    <p class="demo-code">显示代码</p>
+
+    <pre>
+      <code class="xml">{{ demoCodes[0] }}</code>
+      <code class="javascript">{{ demoCodes[1] }}</code>
+    </pre>
+
+    <P>配合自定义渲染，第三行name禁止编辑禁</P>
+
+    <vxe-table
+      ref="xTable"
+      border
+      show-all-overflow
+      :data.sync="tableData"
+      :edit-config="{trigger: 'click', mode: 'row'}">
+      <vxe-table-column type="index" width="60"></vxe-table-column>
+      <vxe-table-column prop="name" label="Name" :edit-render="{type: 'default'}">
+        <template v-slot:edit="{ row }">
+          <input type="text" v-model="row.name">
+        </template>
+      </vxe-table-column>
+      <vxe-table-column prop="sex" label="Sex" :edit-render="{type: 'default'}">
+        <template v-slot:edit="{ row }">
+          <input type="sex" v-model="row.name" :disabled="row.disabled">
+        </template>
+      </vxe-table-column>
+      <vxe-table-column prop="date" label="Date" :edit-render="{type: 'default'}">
+        <template v-slot:edit="{ row }">
+          <input type="date" v-model="row.name">
+        </template>
+      </vxe-table-column>
+    </vxe-table>
+
+    <p class="demo-code">显示代码</p>
+
+    <pre>
+      <code class="xml">{{ demoCodes[2] }}</code>
+      <code class="javascript">{{ demoCodes[3] }}</code>
+    </pre>
+  </div>
+</template>
+
+<script>
+import hljs from 'highlight.js'
+
+export default {
+  data () {
+    return {
+      tableData: [],
+      demoCodes: [
+        `
+        <vxe-table
+          ref="xTable"
+          border
+          show-all-overflow
+          :data.sync="tableData"
+          :edit-config="{trigger: 'click', mode: 'row', activeMethod: activeRowMethod}"
+          @edit-disabled="editDisabledEvent">
+          <vxe-table-column type="index" width="60"></vxe-table-column>
+          <vxe-table-column prop="name" label="Name" :edit-render="{name: 'input'}"></vxe-table-column>
+          <vxe-table-column prop="sex" label="Sex" :edit-render="{name: 'input'}"></vxe-table-column>
+          <vxe-table-column prop="date" label="Date" :edit-render="{name: 'input'}"></vxe-table-column>
+        </vxe-table>
+        `,
+        `
+        export default {
+          data () {
+            return {
+              tableData: []
+            }
+          },
+          created () {
+            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)
+          },
+          methods: {
+            activeRowMethod ({ row, rowIndex }) {
+              return rowIndex !== 1
+            },
+            editDisabledEvent ({ row, column }) {
+              alert('禁止编辑')
+            }
+          }
+        }
+        `,
+        `
+        <vxe-table
+          ref="xTable"
+          border
+          show-all-overflow
+          :data.sync="tableData"
+          :edit-config="{trigger: 'click', mode: 'row'}">
+          <vxe-table-column type="index" width="60"></vxe-table-column>
+          <vxe-table-column prop="name" label="Name" :edit-render="{type: 'default'}">
+            <template v-slot:edit="{ row }">
+              <input type="text" v-model="row.name">
+            </template>
+          </vxe-table-column>
+          <vxe-table-column prop="sex" label="Sex" :edit-render="{type: 'default'}">
+            <template v-slot:edit="{ row }">
+              <input type="sex" v-model="row.name" :disabled="row.disabled">
+            </template>
+          </vxe-table-column>
+          <vxe-table-column prop="date" label="Date" :edit-render="{type: 'default'}">
+            <template v-slot:edit="{ row }">
+              <input type="date" v-model="row.name">
+            </template>
+          </vxe-table-column>
+        </vxe-table>
+        `,
+        `
+        export default {
+          data () {
+            return {
+              tableData: []
+            }
+          },
+          created () {
+            let list = window.MOCK_DATA_LIST.slice(0, 6)
+            this.tableData = list.map((item, index) => {
+              return Object.assign({
+                disabled: index === 2
+              }, item)
+            })
+          }
+        }
+        `
+      ]
+    }
+  },
+  created () {
+    let list = window.MOCK_DATA_LIST.slice(0, 6)
+    this.tableData = list.map((item, index) => {
+      return Object.assign({
+        disabled: index === 2
+      }, item)
+    })
+  },
+  mounted () {
+    Array.from(this.$el.querySelectorAll('pre code')).forEach((block) => {
+      hljs.highlightBlock(block)
+    })
+  },
+  methods: {
+    activeRowMethod ({ row, rowIndex }) {
+      return rowIndex !== 1
+    },
+    editDisabledEvent ({ row, column }) {
+      alert('禁止编辑')
+    }
+  }
+}
+</script>