git hooks test
chenkl
5 years ago
parent
5bfe4d236f
commit
216be1cbc5
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,16 @@
|
|||||||
|
<template>
|
||||||
|
<el-backtop
|
||||||
|
target=".main__wrap--content .el-scrollbar__wrap"
|
||||||
|
:bottom="100"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue'
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'Backtop'
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
@ -1,12 +1,16 @@
|
|||||||
import type { App } from 'vue'
|
import type { App } from 'vue'
|
||||||
|
import SvgIcon from './SvgIcon/index.vue'// svg组件
|
||||||
import Dialog from './Dialog/index.vue'// Dialog组件
|
import Dialog from './Dialog/index.vue'// Dialog组件
|
||||||
import ComTable from './Table/index.vue'// Table组件
|
import ComTable from './Table/index.vue'// Table组件
|
||||||
import ComSearch from './Search/index.vue'// Search组件
|
import ComSearch from './Search/index.vue'// Search组件
|
||||||
import ComDetail from './Detail/index.vue'// Detail组件
|
import ComDetail from './Detail/index.vue'// Detail组件
|
||||||
|
|
||||||
|
import '@/assets/icons' // 引入svg图标
|
||||||
|
|
||||||
export function setupGlobCom(app: App<Element>): void {
|
export function setupGlobCom(app: App<Element>): void {
|
||||||
app.component('ComDialog', Dialog)
|
app.component('ComDialog', Dialog)
|
||||||
app.component('ComTable', ComTable)
|
app.component('ComTable', ComTable)
|
||||||
app.component('ComSearch', ComSearch)
|
app.component('ComSearch', ComSearch)
|
||||||
app.component('ComDetail', ComDetail)
|
app.component('ComDetail', ComDetail)
|
||||||
|
app.component('SvgIcon', SvgIcon)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,3 +0,0 @@
|
|||||||
import Table from './table2'
|
|
||||||
|
|
||||||
export default Table
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
<template>
|
|
||||||
<c-table />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import CTable from './table.vue'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
CTable
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,181 +0,0 @@
|
|||||||
<template>
|
|
||||||
<a-table :data-source="data" :columns="columns">
|
|
||||||
<template #filterDropdown="{ setSelectedfields, selectedfields, confirm, clearFilters, column }">
|
|
||||||
<div style="padding: 8px">
|
|
||||||
<a-input
|
|
||||||
:ref="c => (searchInput = c)"
|
|
||||||
:placeholder="`Search ${column.dataIndex}`"
|
|
||||||
:value="selectedfields[0]"
|
|
||||||
style="width: 188px; margin-bottom: 8px; display: block;"
|
|
||||||
@change="e => setSelectedfields(e.target.value ? [e.target.value] : [])"
|
|
||||||
@pressEnter="handleSearch(selectedfields, confirm, column.dataIndex)"
|
|
||||||
/>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
size="small"
|
|
||||||
style="width: 90px; margin-right: 8px"
|
|
||||||
@click="handleSearch(selectedfields, confirm, column.dataIndex)"
|
|
||||||
>
|
|
||||||
<template #icon><SearchOutlined /></template>
|
|
||||||
Search
|
|
||||||
</el-button>
|
|
||||||
<el-button size="small" style="width: 90px" @click="handleReset(clearFilters)">
|
|
||||||
Reset
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #filterIcon="filtered">
|
|
||||||
<search-outlined :style="{ color: filtered ? '#108ee9' : undefined }" />
|
|
||||||
</template>
|
|
||||||
<template #customRender="{ text, record, index, column }">
|
|
||||||
<span v-if="searchText && searchedColumn === column.dataIndex">
|
|
||||||
<template
|
|
||||||
v-for="(fragment, i) in text
|
|
||||||
.toString()
|
|
||||||
.split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
|
|
||||||
>
|
|
||||||
<mark v-if="fragment.toLowerCase() === searchText.toLowerCase()" class="highlight">
|
|
||||||
{{ fragment }}
|
|
||||||
</mark>
|
|
||||||
<template v-else>{{ fragment }}</template>
|
|
||||||
</template>
|
|
||||||
</span>
|
|
||||||
<template v-else>
|
|
||||||
{{ text }}
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
</a-table>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { SearchOutlined } from '@ant-design/icons-vue';
|
|
||||||
const data = [
|
|
||||||
{
|
|
||||||
field: '1',
|
|
||||||
name: 'John Brown',
|
|
||||||
age: 32,
|
|
||||||
address: 'New York No. 1 Lake Park',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: '2',
|
|
||||||
name: 'Joe Black',
|
|
||||||
age: 42,
|
|
||||||
address: 'London No. 1 Lake Park',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: '3',
|
|
||||||
name: 'Jim Green',
|
|
||||||
age: 32,
|
|
||||||
address: 'Sidney No. 1 Lake Park',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: '4',
|
|
||||||
name: 'Jim Red',
|
|
||||||
age: 32,
|
|
||||||
address: 'London No. 2 Lake Park',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
SearchOutlined,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
data,
|
|
||||||
searchText: '',
|
|
||||||
searchInput: null,
|
|
||||||
searchedColumn: '',
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
title: 'Name',
|
|
||||||
dataIndex: 'name',
|
|
||||||
field: 'name',
|
|
||||||
slots: {
|
|
||||||
filterDropdown: 'filterDropdown',
|
|
||||||
filterIcon: 'filterIcon',
|
|
||||||
customRender: 'customRender',
|
|
||||||
},
|
|
||||||
onFilter: (value, record) =>
|
|
||||||
record.name
|
|
||||||
.toString()
|
|
||||||
.toLowerCase()
|
|
||||||
.includes(value.toLowerCase()),
|
|
||||||
onFilterDropdownVisibleChange: visible => {
|
|
||||||
if (visible) {
|
|
||||||
setTimeout(() => {
|
|
||||||
console.log(this.searchInput);
|
|
||||||
this.searchInput.focus();
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Age',
|
|
||||||
dataIndex: 'age',
|
|
||||||
field: 'age',
|
|
||||||
slots: {
|
|
||||||
filterDropdown: 'filterDropdown',
|
|
||||||
filterIcon: 'filterIcon',
|
|
||||||
customRender: 'customRender',
|
|
||||||
},
|
|
||||||
onFilter: (value, record) =>
|
|
||||||
record.age
|
|
||||||
.toString()
|
|
||||||
.toLowerCase()
|
|
||||||
.includes(value.toLowerCase()),
|
|
||||||
onFilterDropdownVisibleChange: visible => {
|
|
||||||
if (visible) {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.searchInput.focus();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Address',
|
|
||||||
dataIndex: 'address',
|
|
||||||
field: 'address',
|
|
||||||
slots: {
|
|
||||||
filterDropdown: 'filterDropdown',
|
|
||||||
filterIcon: 'filterIcon',
|
|
||||||
customRender: 'customRender',
|
|
||||||
},
|
|
||||||
onFilter: (value, record) =>
|
|
||||||
record.address
|
|
||||||
.toString()
|
|
||||||
.toLowerCase()
|
|
||||||
.includes(value.toLowerCase()),
|
|
||||||
onFilterDropdownVisibleChange: visible => {
|
|
||||||
if (visible) {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.searchInput.focus();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleSearch(selectedfields, confirm, dataIndex) {
|
|
||||||
confirm();
|
|
||||||
console.log(selectedfields[0]);
|
|
||||||
this.searchText = selectedfields[0];
|
|
||||||
this.searchedColumn = dataIndex;
|
|
||||||
this.$forceUpdate();
|
|
||||||
},
|
|
||||||
|
|
||||||
handleReset(clearFilters) {
|
|
||||||
clearFilters();
|
|
||||||
this.searchText = '';
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
::v-deep.highlight {
|
|
||||||
background-color: rgb(255, 192, 105);
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,58 +0,0 @@
|
|||||||
import { Table } from 'ant-design-vue'
|
|
||||||
import { defineComponent } from 'vue'
|
|
||||||
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
dataIndex: 'name',
|
|
||||||
field: 'name',
|
|
||||||
// slots: { title: 'customTitle', customRender: 'name' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Age',
|
|
||||||
dataIndex: 'age',
|
|
||||||
field: 'age'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Address',
|
|
||||||
dataIndex: 'address',
|
|
||||||
field: 'address'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const data = [
|
|
||||||
{
|
|
||||||
field: '1',
|
|
||||||
name: 'John Brown',
|
|
||||||
age: 32,
|
|
||||||
address: 'New York No. 1 Lake Park',
|
|
||||||
tags: ['nice', 'developer']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: '2',
|
|
||||||
name: 'Jim Green',
|
|
||||||
age: 42,
|
|
||||||
address: 'London No. 1 Lake Park',
|
|
||||||
tags: ['loser']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: '3',
|
|
||||||
name: 'Joe Black',
|
|
||||||
age: 32,
|
|
||||||
address: 'Sidney No. 1 Lake Park',
|
|
||||||
tags: ['cool', 'teacher']
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'Test',
|
|
||||||
setup() {
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<Table columns={columns} dataSource={data} v-slots={{
|
|
||||||
title: () => (<div>哈哈</div>)
|
|
||||||
}}>
|
|
||||||
</Table>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
Loading…
Reference in New Issue