vuetify：v-data-table自定义列显示的内容及搜索功能

相关文章推荐

帅呆的茴香 · vue，按钮控制div显示与隐藏_vue隐藏 ...· 2 天前 ·

面冷心慈的树叶 · VUE动态控制表格列的显示隐藏_vue隐藏t ...· 2 天前 ·

时尚的砖头 · vue3 + ts动态绑定赋值 - CSDN文库· 2 天前 ·

没人理的蚂蚁 · vue post传多个参数 - CSDN文库· 昨天 ·

开朗的小刀 · electron 打开本地程序 - CSDN文库· 昨天 ·

强健的回锅肉 · 刺客信条：团结 | 刺客信条中文维基 | ...· 2 周前 ·

长情的大脸猫 · Java报错Failed to ...· 1 年前 ·

坚韧的开心果 · 如何评价《牧神记》？ - 知乎· 1 年前 ·

俊逸的圣诞树 · 重磅！史上最牛的现金流量表编制教程即将出炉！ ...· 1 年前 ·

从未表白的毛衣 · 原神上天梯景点_原神天梯_上天梯在哪 - 抖音· 1 年前 ·

v-for="headerData in headerArr.filter( (val, index, arr) => { return index !== 0 && index !== 1 && index !== 7 && index !== 8; :key="headerData.value"

v-for="headerData in headerArr.filter( (val, index, arr) => { return index === 7; :key="headerData.value"

delete

v-for="headerData in headerArr.filter( (val, index, arr) => { return index === 8; :key="headerData.value"

ADD

SAVE

    data: () => ({
      headerArr: [
        { text: '#', sortable: false },
        { text: 'Field Key', value: 'fieldKey', sortable: false, controlType: 'text' },
        { text: 'Field Label', value: 'fieldLabel', sortable: false, controlType: 'v-text-field' },
        { text: 'Description', value: 'description', sortable: false, controlType: 'v-text-field' },
        { text: 'Data Type', value: 'dataType', sortable: false, controlType: 'v-select', menu: [{ value: 0, text: 'Number' }, { value: 1, text: 'String' }, { value: 2, text: 'Date' }, { value: 3, text: 'Date Time' }, { value: 4, text: 'Time' }, { value: 5, text: 'Boolean' }] },
        { text: 'Control Type', value: 'controlType', sortable: false, controlType: 'v-select', menu: [{ value: 0, text: 'Text Area' }, { value: 1, text: 'Text Box' }, { value: 2, text: 'Check Box' }, { value: 3, text: 'Radio Box' }, { value: 4, text: 'Com Box' }, { value: 5, text: 'Date Picker' }, { value: 6, text: 'Time Picker' }] },
        { text: 'Status', value: 'status', sortable: false, controlType: 'v-switch' },
        { text: 'Operate', sortable: false },
        { text: 'Action', sortable: false }
      formField: [
        { fieldLabel: '11111', fieldKey: 'test1', description: 'dgbfuocgbdvhcbjkdf', dataType: 0, controlType: 0, status: 1 },
        { fieldLabel: '22222', fieldKey: 'test2', description: 'fcbdsoufhcnpoasxhn', dataType: 0, controlType: 1, status: 0 },
        { fieldLabel: '33333', fieldKey: 'test3', description: 'djpaohsfncolfnbvcj', dataType: 1, controlType: 0, status: 1 },
        { fieldLabel: '44444', fieldKey: 'test4', description: 'feopjfgprjnbgjbnhy', dataType: 1, controlType: 1, status: 0 },
        { fieldLabel: '55555', fieldKey: 'test5', description: 'ghfiphsndgjfnbjfgn', dataType: 2, controlType: 1, status: 1 }
      search: ''
    methods: {
      clickItem (index) {
        const temp = this.tabs[index]
        temp.bOn = !this.tabs[index].bOn
        this.$set(this.tabs, index, temp)
      gotoDetail (data) {
        console.log(data)
      editItems (action, item, index) {
        switch (action) {
          case 'ADD':
            this.formField.push({ fieldLabel: '', fieldKey: 'test', description: '', dataType: 0, controlType: 0, status: 1 })
            this.$forceUpdate()
            break
          case 'DELETE':
            if (this.formField[index] === item) {
              this.formField.splice(index, 1)
            break
          default:
            break
      saveItem () {
        console.log(this.formField)
<style>
.form-table.v-text-field--outlined > .v-input__control > .v-input__slot {
  align-items: stretch;
  min-height: 32px;
  margin-top: 2px;
</style>
                    &lt;template&gt;  &lt;v-container class="loan-work-queue" grid-list-xl fluid&gt;    &lt;add-activity-dialog v-if="showDialog.addActivity" :showDialog="showDialog" :isActivitiesManagement="isActivitiesManagement" @initTableData="initTableData"&gt;&lt;/add
      "ajax": function (data, callback, settings) {
        postJson(
            "/AccessControlSystem/user/selectByPrimary",
            {'pageSiz
				v-data-table 用于显示表格数据，功能包括排序、搜索、分页、行内编辑、头部提示以及行选择。而我们在实际应用中使用最多的就是服务端分页和排序，如果你从后台加载数据，并希望显示结果之前进行分页和排序，你可以使用 total-items 属性。定义这个属性将会禁用内置的分页和排序，并且你需要使用 pagination 属性来监听变化。使用 loading 属性来显示获取数据时的进度条。
1、v-data-table核心属性
（1）headers：定义表头的数组，数组的每个元素就是一个表头信息对象，结构：
vue项目中实现查询功能是最基本的操作。由于vue的动态绑定特性，我们可以在computed中新增方法，实现动态效果。
2、前端写法- --前端框架使用的是element-plus
 <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        @row-dblclick="rowDblclick"
        ref="tableData"
				Vue-super-flow 是基于vue 开发的一款生成、预览流程图的组件。使用者可以根据不同的需求对图、节点、连线进行细致的控制。
npm install vue-super-flow
二、引用（选择其中一种方式即可）
①全局引用：在main.js文件中添加
import SuperFlow from 'vue-super-flow'
import 'vue-super-flow/lib/index.css'
Vue.use(SuperFlow)
②局部引用：在要用到vue-super-f
Element UI的使用；
vue如何动态循环渲染Element UI中table内容；
Element UI中table最后一列为操作按钮，如何动态渲染并绑定点击事件。
一、Element UI的使用
查看文档使用：Element UI文档
npm i element-ui -S
在main.js中进行引入：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/
				按照一般官网的集成方案安装CKEditor5，需要vue的版本在3.x及以上才能使用，但是，由于博主目前使用的是vue2.6.10，所以这里介绍一种源码集成方案。注意，使用源码集成手脚架(vue/cli)必须要3.x及以上版本。
一、安装ckeditor基础框架、一些基础功能和主题：
npm install --save @ckeditor/ckeditor5-vue2 @ckeditor/ckeditor5-dev-webpack-plugin @ckeditor/ckeditor5-dev-utils 
				上一篇博客提到动态渲染table的操作按钮列并绑定点击事件：
vue+Element UI table表格动态渲染(包括操作按钮列)、按钮动态绑定点击事件
所以这里接着做，将按钮的点击事件提取为全局公共方法再调用：
一、创建一个commonApi.js文件，将点击事件提取到这里，并写一个获取调用此js中方法的vue组件实例(this)的方法：
//用来获取 调用此js的vue组件实例(this)
let vm = null;
const sendThis = (_this)=>{
    vm = _
					<e-table         :table-data="tableData"         :table-columns="tableLabel"         :page="page"         :size="size"         :total="total"         :loading="loading"         :table-option="tableOption"         @pageChange="pageChange"         @clickButton="clickButton"         @handleSelectionChange="handleSelectionChange"       >
- total：用来设置表格总共有多少行。
- loading：用来设置表格是否处于加载中的状态。
- table-option：用来设置表格的一些配置项，例如是否显示多选框、是否显示序号等。
- pageChange：用来监听表格页码变化的事件。
- clickButton：用来监听表格按钮点击的事件。
- handleSelectionChange：用来监听表格行选中状态变化的事件。
这些属性和事件都是通过组件的props和events来实现的。可以根据具体的需求来设置和使用。